本文来自于以下链接
https://www.cnblogs.com/theflight/p/13472667.html
1 如何设置cookie
document.cookie='name=xie'
//设置cookie的过期时间,这里设置为7天
let data=new Date().getTime()
let new_data=new Date(data+7*24*60*60*1000)
document.cookie='name=xie;'+'expires='+new_data.toUTCString()
注:如果要设置多条cookie,必须一条一条设置,不能批量设置
2 删除cookie
设置一个已过期时间就行
3 封装cookie
function setCookies(obj,time){
let data=new Date(new Date().getTime()+time*24*60*60*1000)
for (let i in obj){
document.cookie=i+'='+obj[i]+';expires='+data
}
}
function delCookies(obj){
let data=new Date(new Date().getTime()-*24*60*60*1000)
for (let i in obj){
document.cookie=i+'='+obj[i]+';expires='+data
}
}
为什么要用cookie和localstorage做数据持久化
token、用户名和用户其他信息,当后端接口响应回来数据的时候,因为组件的封装,我们一般会将这些数据放在vuex的公共数据存放区域,但是存在一个问题,就是vuex存放的数据一刷新就会消失,因此,需要给这部分数据做一个数据持久化,通过cookie或localstorage将数据保存到本地
vuex配置
import Vue from 'vue'
import Vuex from 'vuex'
import Cookies from 'js-cookie'
Vue.use(Vuex)
const store=new Vuex.Store({
state:{
token:''
}
mutations:{
setToken(state,token){
state.token=token
Cookies.set('token'.token)
},
getToken(state){
state.token=state.token || Cookies.get('Token')
},
clearToken(state){
state.token=''
Cookies.remove('token')
}
}
})
main.js配置,需要先判断token是否存在,如果存在,就不需要登录了,不存在只能跳转到登录页
router.beforeEach((to,from.next)=>{
this.$store.commit('getToken')
const token= store.state.token
if (token){
if(to.path==='/login'){
next('/home')
}
else{
next()
}
}else{
if(to.path==='/login'){
next()
}else{
next('/login')
}
}
})
使用localstorage做数据持久化
const TOKEN_STR='tokenStr'
export const getToken=()=>{
return JSON.parse(localstorage.getItem(TOKEN_STR))
}
export const setToken=()=>{
return JSON.parse(localstorage.setItem(TOKEN_STR))
}
export const clearToken=()=>{
return JSON.parse(localstorage.removeItem(TOKEN_STR))
}