企业官网建设流程全解析

自建网站三种模式,网络推广活动策划,深圳手机端网站建设,wordpress用户仪表盘如何设计一、退出要实现的操作#xff08;1#xff09;清理掉当前用户缓存数据#xff08;2#xff09;清理掉权限相关配置#xff08;3#xff09;返回到登录页二、主动退出主动退出指的是用户点击登录按钮之后退出就是绑定点击退出事件#xff0c;然后这个退出函数一般写在sto…一、退出要实现的操作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) } )一般单用户登录也是用被动处理的这里我也是在学习中然后所用到的账号还是在多设备中可以登录的处理单用户登录办法后续再补。