后台管理系统之退出登录方案记录
退出登录 它的触发时机一般有两种:
实现用户主动退出的对应策略
在 store/modules/user.js
中,添加对应 action
:
import router from '@/router'logout() {//一、清理掉当前用户缓存数据this.commit('user/setToken', '')this.commit('user/setUserInfo', {})removeAllItem()//二、清理掉权限相关配置//三、返回到登录页router.push('/login')
}
为退出登录按钮添加点击事件,触发 logout
的 action
:
import { useStore } from 'vuex'const store = useStore()
const logout = () => {store.dispatch('user/logout')
}
实现用户被动退出的对应策略之主动处理(应对 token
失效 )
在 constant
中声明对应常量
// token 时间戳
export const TIME_STAMP = 'timeStamp'
// 超时时长(毫秒) 两小时
export const TOKEN_TIMEOUT_VALUE = 2 * 3600 * 1000
在用户登陆时,记录当前登录时间。创建 utils/auth.js
文件
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
}
在用户登录成功之后去设置时间,到 store/user.js
的 login
中:
import { setTimeStamp } from '@/utils/auth'login(context, userInfo) {...return new Promise((resolve, reject) => {....then(data => {...// 保存登录时间setTimeStamp()resolve()})})}
在 utils/request
对应的请求拦截器中进行主动介入
import { isCheckTimeout } from '@/utils/auth'if (store.getters.token) {//判断是否过期if (isCheckTimeout()) {// 登出操作store.dispatch('user/logout')return Promise.reject(new Error('token 失效'))}...}
实现用户被动退出的对应策略之被动处理(应对 token
失效 )
在 utils/request
的响应拦截器中,通过服务端返回的状态码进行判断:
// 响应拦截器
service.interceptors.response.use(response => {...},error => {// 处理 token 超时问题if (error.response &&error.response.data &&error.response.data.code === 401) {// token超时store.dispatch('user/logout')}ElMessage.error(error.message) // 提示错误信息return Promise.reject(error)}
)