一篇文章搞懂退出功能

一、退出要实现的操作

（1）清理掉当前用户缓存数据

（2）清理掉权限相关配置

（3）返回到登录页

二、主动退出

主动退出指的是用户点击登录按钮之后退出

就是绑定点击退出事件，然后这个退出函数一般写在store中的user中的actions中，和登录的一样

import { removeAllItem } from '@/utils/storage' // 这个removeAllItem主要就是将window.localStorage.clear()清空 export default { state:(), mutations:(), actions:{ logout() { this.commit('user/setToken', '') this.commit('user/setUserInfo', {}) removeAllItem() router.push('/login') } } }

三、被动退出（token失效与单用户登录）

（1）主动处理——解决token失效，然后退出

在utils/auth.js中写入如下代码（处理token缓存时间）

import { TIME_STAMP, TOKEN_TIMEOUT_VALUE } from '@/constant' import { setItem, getItem } from '@/utils/storage' /** * 获取时间戳 */ export function getTimeStamp() { return getItem(TIME_STAMP) } /** * 设置时间戳 */ export function setTimeStamp() { setItem(TIME_STAMP, Date.now()) } /** * 是否超时 */ export function isCheckTimeout() { // 当前时间戳 var currentTime = Date.now() // 缓存时间戳 var timeStamp = getTimeStamp() return currentTime - timeStamp > TOKEN_TIMEOUT_VALUE }

在constant/index.js中

export const TIME_STAMP = 'timeStamp' export const TOKEN_TIMEOUT_VALUE = 1000 * 60 * 30 // 缓存时间30分钟

用户登录后设置时间

import { setTimeStamp } from '@/utils/auth' export default { namespaced: true, state: () => ({}), mutations: {}, actions: { login(context, userInfo) { 。。。 return new Promise((resolve, reject) => { 。。。 .then((data) => { 。。。 setTimeStamp() // 登录成功后设置时间戳 resolve() }) .catch((err) => { reject(err) }) }) }, 。。。 } }

在请求拦截器中主动介入（到达设置的时间节点后自动退出）

service.interceptors.request.use((config) => { 。。。 if (store.getters.token) { if (isCheckTimeout()) { store.dispatch('user/logout') return Promise.reject(new Error('token 失效')) } 。。。 } return config })

（2）被动处理——token失效

在响应拦截器中

service.interceptors.response.use( (response) => { 。。。 }, (error) => { if ( error.response && error.response.data && error.response.data.code === 401 ) { store.dispatch('user/logout') } ElMessage.error(error.message) return Promise.reject(error) } )

一般单用户登录也是用被动处理的，这里我也是在学习中，然后所用到的账号还是在多设备中可以登录的，处理单用户登录办法后续再补。