前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >路由拦截和路由守卫

路由拦截和路由守卫

原创
作者头像
肥晨
发布2023-02-16 10:10:06
1.4K0
发布2023-02-16 10:10:06
举报
文章被收录于专栏:农民工前端

在vue中,为确保用户登录,使用路由拦截器或者路由守卫判断登录状态,并判断和处理情况。

路由守卫是什么?

官方文档的解释是:

​编辑

可以用router.beforeEach注册一个路由守卫

代码语言:javascript
复制
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

注:这是一个全局路由,守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于等待中。

而三个参数分别是什么意思呢?

路由导航守卫

to代表我们将要访问的路径

from代表我们从哪个页面路径跳转而来

next代表放行的函数

下面用几个案例展示:

代码语言:javascript
复制
案例一:
//为路由对象,添加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 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档