vue中cookie的使用

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.com' (domain主要解决cookie跨域的问题)
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'})//清除cookie,如果要放在线上运行要改为线上的网址eg:http:www.kongxianlc.com那么domain:'.kongxianlc.com'
   cookie.remove('phone', {domain: 'localhost'})
      this.userPhone = null
window.$tips('账户退出成功')
}
},
created () {
this.userPhone = cookie.get('phone')//获取cookie
// console.log(cookie.get('phone'))
}
}
 
posted @ 2018-11-14 21:02  苏小白啊  阅读(6048)  评论(0编辑  收藏  举报