路由拦截和路由守卫

简介: 笔记

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

 

 

路由守卫是什么?

官方文档的解释是:

30.png

 

可以用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() 
      }
})




目录
相关文章
|
7月前
|
JavaScript 数据安全/隐私保护 网络架构
Vue 前置 后置 路由守卫 独享 路由权限控制 自定义属性
Vue 前置 后置 路由守卫 独享 路由权限控制 自定义属性
|
2月前
|
JavaScript
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
vue路由导航守卫(全局守卫、路由独享守卫、组件内守卫)
86 0
|
4天前
|
JavaScript 数据安全/隐私保护
|
2月前
|
JavaScript 网络架构
路由的使用
路由的使用
13 0
|
2月前
|
JavaScript Go
路由跳转及路由传参
路由跳转及路由传参
19 1
|
11月前
|
Java Nacos 微服务
路由过滤器 GatewayFilter
路由过滤器 GatewayFilter
59 0
路由过滤器 GatewayFilter
|
11月前
|
前端开发 JavaScript API
React/Vue 实现路由鉴权、导航守卫和路由拦截的优化建议
本文介绍了在 React 和 Vue 中如何实现路由鉴权、导航守卫和路由拦截的方法。路由鉴权是指根据用户权限验证用户是否有权限访问特定的路由页面。导航守卫是在路由切换之前执行的钩子函数,用于控制路由的跳转。路由拦截是在路由处理过程中拦截某些特定路由的行为。本文将介绍 React 和 Vue 中的相关概念和实现方式,并通过示例代码展示如何应用这些概念来实现路由鉴权、导航守卫和路由拦截。
373 2
|
前端开发 JavaScript Java
关于前端路由我所知道的
关于前端路由我所知道的
70 0
|
负载均衡 前端开发 Java
统一网关Gateway、路由断言工厂、路由过滤器及跨域问题处理
统一网关Gateway、路由断言工厂、路由过滤器及跨域问题处理
218 0
|
前端开发 JavaScript API
react实现路由跳转拦截功能(导航守卫)
react实现路由跳转拦截功能(导航守卫)
2324 0
react实现路由跳转拦截功能(导航守卫)