在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()
}
})
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。