vue 设置路由导航守卫 控制路由跳转
程序员文章站
2022-03-11 16:29:54
在实际项目中,通常有这样的需求,在用户没有登录的时候通常时不允许访问除了登录页面之外的页面,这个时候就需要使用路由导航守卫来控制跳转了,通常设置如下在router文件夹下的index.js中添加如下代码//为路由对象,添加beforEach导航守卫router.beforEach ((to,from,next)=>{ //to 将要访问的路径 // from 代表从哪个路径跳转而来 //next 表示放行函数 // next() 直接放行 ne......
在实际项目中,通常有这样的需求,在用户没有登录的时候通常时不允许访问除了登录页面之外的页面,这个时候就需要使用路由导航守卫来控制跳转了,通常设置如下
在router文件夹下的index.js中添加如下代码
//为路由对象,添加beforEach导航守卫
router.beforEach ((to,from,next)=>{
//to 将要访问的路径
// from 代表从哪个路径跳转而来
//next 表示放行函数
// next() 直接放行 next('/xxx') 强制跳转
if(to.path === '/login') return next();
const token = window.sessionStorage.getItem('token)
if(!token) return next('/login')
next()
})
本文地址:https://blog.csdn.net/gl19980514/article/details/107353310
上一篇: 梦幻西游动画制作
下一篇: echarts 关系图
推荐阅读
-
vue-router 实现导航守卫(路由卫士)的实例代码
-
vue路由导航守卫和请求拦截以及基于node的token认证的方法
-
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
-
vue-router 实现导航守卫(路由卫士)的实例代码
-
vue学习指南:第十四篇(详细) - Vue的 路由 第四篇 ( 路由的导航守卫 )
-
Vue-路由导航菜单栏的高亮设置方法
-
vue2.0 实现导航守卫(路由守卫)
-
vue路由导航守卫和请求拦截以及基于node的token认证的方法
-
Vue的路由动态重定向和导航守卫实例
-
Vue学习之父子组件通讯,Vuex与购物车修改删,导航守卫解决权限路由问题详解