路由拦截和路由守卫

473 阅读1分钟

在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() 

      }

})