vue中cookie的使用

Posted 2021-01-20 wssdx

1.存放cookie
import md5 from ‘blueimp-md5‘
import cookie from ‘js-cookie‘
import url from ‘../api/url.js‘
import http from ‘../api/http.js‘
// 每个input输入框的错误提示显示的条件：
// 1.匹配当前输入框输入的内容是否满足格式限制（从输入前就已经在实时判断）
// 2.是否打开错误提示--此为手动打开
export default {
  data () {
    return {
      phone: null,
      password: null,
      phoneTips: false // 是否显示手机号验证错误提示
    }
  },
  computed: {
    phoneTest () {
      var reg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/
      return reg.test(this.phone)
    },
    target () {
      return this.$route.query.target
    }
  },
  methods: {
    clearPhone () {
      this.phone = ‘‘
      this.phoneTips = ‘‘
    },
    login () {
      if (!this.phoneTest) {
        this.phoneTips = true
      } else {
        http.post(url.login, {
          phone: this.phone,
          pwd: md5(this.phone + this.password)
        }).then(res => {
          cookie.set(‘sid‘, res.data.sid, { domain: ‘localhost‘ })//domain：是存放的地址：如果是在本地运行的代码改为localhost,如果要放在线上运行要改为线上的网址eg:http:www.kongxianlc.com那么domain:‘kongxianlc‘
          cookie.set(‘phone‘, res.data.phone, { domain: ‘localhost‘ })
          this.$router.push(this.target || ‘/‘)
          console.log(this.phone)
        })
      }
    }
  }
}

2.使用cookie 获取

import cookie from ‘js-cookie‘
import url from ‘../api/url.js‘
import http from ‘../api/http.js‘
export default {
  data () {
    return {
      userPhone: null,
      subNav: false // 是否显示互动的二级菜单
    }
  },
  methods: {
    tabSubNav (bl) {
      this.subNav = bl
    },
    logout () {
      cookie.get(‘sid‘) && http.post(url.logout);
      (this.$route.matched[0].path === ‘/account‘) && this.$router.push(‘/‘)
      cookie.remove(‘sid‘, {domain: ‘.localhost.com‘})
      cookie.remove(‘phone‘, {domain: ‘.localhost.com‘})
      this.userPhone = null
      window.$tips(‘账户退出成功‘)
    }
  },
  created () {
    this.userPhone = cookie.get(‘phone‘)
    // console.log(cookie.get(‘phone‘))
  }
}