VUE利用cookie让token数据持久化

每当我们存了token进localStorage中点击刷新会让token重新获取,这个时候就需要用到cookie让他持久存储到localStorage。

1、首先配置util文件中的auth.js文件(文件名随便起)用cookie来控制token

import Cookies from 'js-cookie'

const TokenKey(变量名) = 'cookiename' //存到cookie的键名称

export function getToken() {

  return Cookies.get(TokenKey)

}

export function setToken(token) {

  return Cookies.set(TokenKey, token)

}

export function removeToken() {

  return Cookies.remove(TokenKey)

}

2、配置完auth.js文件后利用vuex来设置token

//login是后端接口,用来拿到token数据

import { login } from '@/api/user'

//引入

import { getToken, setToken } from '@/utils/auth'

const state = {

token: getToken()

}

const mutations = {

setToken(state, data) {

state.token = data

setToken(data)

},

removeToken(state, data) {

state.token = null

}

}

const actions = {

async login(store, data) {

const res = await login(data)

store.commit('setToken', res.data.data)

}

}

export default {

namespaced: true,

state,

mutations,

actions

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值