vue-admin-template处理token失效

boyanx3个月前技术教程24


token失效后应该删除token使其跳转至登录页面,而不是报401错误。

1.在request.js的拦截器的位置添加401的判断,在此进行token的删除和跳转

跳转要导入路由

import { router } from '@/router'

async(error) => {
    if (error.response.status == 401) {
    Message({ type: 'warning', message: 'token 超时了' })
    // 说明token超时了
    await store.dispatch('user/logout') // 相当于调用action退出登陆
    router.push('/login') // 跳转到登录页
    }
    Message({ type: 'info', message: error.message })
    return Promise.reject(error)
    }

2.在store/user.js添加token删除action logout


logout(context) {
    context.commit("removeToken") // 删除token
    context.commit("setUserInfo",{}) // 设置用户信息为空
}


添加removeToken mutations

removeToken(state) {

    // 删除vuex的token

    state.token = null

    removeToken()

},

标签: vueadmin

相关文章

vue-element-admin,基于 vue +element-ui实现的后台前端解决方案

简介vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现。它使用了最新的前端技术栈,内置了 i18n 国际化解决方案,动态路由,权限验证,提炼了典型...

基于vue3+ts+elementPlus后台管理系统VueNextAdmin

今天给大家分享一个适配 手机、平板、pc 的后台开源免费管理系统。vue-next-admin 一款基于vue3+vite.js+typescript+element-plus开发的中后台管理系统平台...

vue-element-admin 增删改查(五)_vue element 增删改查

此篇幅比较长,涉及到的小知识点也比较多,一定要耐心看完,记住学东西没有耐心可不行!!!一、添加和修改注:添加和编辑用到了同一个组件,也就是此篇文章你能学会如何封装组件及引用组件;第二能学会async和...

1.8K Star!Cool-Admin-Vue:AI编码+流程编排,重新定义后台开发

「小墨是前端」专注分享前端技术,推荐优秀的开源项目,展示Github、Gitee上的创意作品,带你深入前端底层,一起成长。大家好!我是小墨,本期给大家推荐一个超酷的后台权限管理系统—— Cool-Ad...

超优质 Vue3+NaiveUI 后台管理AdminWord

#头条创作挑战赛#今天再来给大家推荐一款漂亮功能强大的 Vue3 中后台管理系统框架。admin-work 基于 Vue3 + Vite2 + Typescript + Navie UI 搭建的一款全...

优秀 vue+heyui 后端管理系统HeyUI-Admin

今天再给小伙伴们推荐一款成熟的企业中后台管理系统HEYUI-Admin。heyui-admin 基于vue.js和heyui组件库构建的后台管理系统。包含基础表单/表格功能,拓展组件(图表、富文本编辑...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。