路由拦截和路由守卫
2023-03-07 09:14:59 时间
在vue中,为确保用户登录,使用路由拦截器或者路由守卫判断登录状态,并判断和处理情况。
路由守卫是什么?
官方文档的解释是:
编辑
可以用router.beforeEach注册一个路由守卫
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
注:这是一个全局路由,守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。
而三个参数分别是什么意思呢?
路由导航守卫
to代表我们将要访问的路径
from代表我们从哪个页面路径跳转而来
next代表放行的函数
下面用几个案例展示:
案例一:
//为路由对象,添加before 导航守卫
router.beforeEach((to,from,next)=>{
// 如果用户访问的登录页,直接放行
if(to.path==='/login') return next()
//从sessionStorage中获取到保存的token值
const tokenStr=window.sessionStorage.getItem('token')
//没有token,强制跳转到登录页
if(!tokenStr) return next('/login')
next()
})
案例二:
router.beforeEach((to, from, next) => {
if (to.meta.istoken == true) {
router.push('/目标地址')
return
}
next()
})
{
path: '/edit',
component: edit,
meta: {
istoken: true
}
},
案例三:
思路:【
如果(即将进入的这个路由需要权限才能进入){
如果(能获取到这个老哥的userID){
就让这个老哥进入这个路由
}否则{
就让这个老哥进入b这个页面
}
}即将进入的路由不需要权限就能进入{
就让这个老哥进入这个路由
} 】
对应代码:
import store from '@/assets/store' //把这个userId获取过来
router.beforeEach((to,from,next)=>{
if(to.meta.requireAuth){
if(store.state.userId){
next()
}else{
next({path:'/b'})
}
}else{
next()
}
})
相关文章
- 在 Go 里用 CGO?这 7 个问题你要关注!
- 9款优秀的去中心化通讯软件 Matrix 的客户端
- 求职数据分析,项目经验该怎么写
- 在OKR中,我看到了数据驱动业务的未来
- 火山引擎云原生大数据在金融行业的实践
- OpenHarmony富设备移植指南(二)—从postmarketOS获取移植资源
- 《数据成熟度指数》报告:64%的企业领袖认为大多数员工“不懂数据”
- OpenHarmony 小型系统兼容性测试指南
- 肯睿中国(Cloudera):2023年企业数字战略三大趋势预测
- 适用于 Linux 的十大命令行游戏
- GNOME 截图工具的新旧截图方式
- System76 即将推出的 COSMIC 桌面正在酝酿大变化
- 2GB 内存 8GB 存储即可流畅运行,Windows 11 极致精简版系统 Tiny11 发布
- 迎接 ecode:一个即将推出的具有全新图形用户界面框架的现代、轻量级代码编辑器
- loongarch架构介绍(三)—地址翻译
- Go 语言怎么解决编译器错误“err is shadowed during return”?
- 敏捷:可能被开发人员遗忘的部分
- Denodo预测2023年数据管理和分析的未来
- 利用数据推动可持续发展
- 在 Vue3 中实现 React 原生 Hooks(useState、useEffect),深入理解 React Hooks 的