cookie实现登录功能

本文来自于以下链接
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))
}