登录token处理
2022/1/30 6:04:45
本文主要是介绍登录token处理,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
基本流程:登录后保存token
是否有token
有token
- 判断跳转页是否是登录页面
- 是----->直接跳转到主页
- 否----->放过通行
没有token
- 判断跳转的页面是否需要token,即跳转页是否在白名单
是---->翻过通行
否---->跳转到登录页
一般在项目根目录中新增permission.js文件,用于进行判断token,
一般在路由跳转的时候才能够进行权限拦截,能够拦截路由跳转的是路由守卫
因此需要导入路由实例对象 import router from '@/router' // 引入路由实例
token值需要从store中取得,import store from '@/store' // 引入vuex store实例
在跳转的时候需要有进度条显示,这里用到了nprogress
1、先简单介绍一下beforeEach,它是Vue-router 的钩子函数,有三个参数,分别是:
1.1)to:router 即将进入的路由对象
1.2)from:当前导航即将离开的路由
1.3)next:function,进行管道中的一个钩子,如果执行完了,则导航的状态就是 confirmed
next() 放行
next(false) 跳转终止
next(地址) 跳转到某个地址
to.path() 访问即将要跳转的地址
import router from '@/router' import store from '@/store' import NProgress from 'nprogress' import 'nprogress/nprogress.css' const whiteList = ['/login', '/404'] // 路由前置守卫 router.beforeEach((to, from, next) => { NProgress.start() if (store.getters.token) { if (to.path === '/login') { next('/') } else { next() } } else { if (whiteList.indexOf(to.path) > -1) { next() } else { next('/login') } } NProgress.done() }) // 路由后置守卫 router.afterEach(function() { NProgress.done() })
这篇关于登录token处理的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)