Vue 中路由导航守卫的介绍及使用

路由导航守卫是为了路由跳转之前做的检查及操作
比如:用户没有登录 而是直接通过修改浏览器 url 来访问网页,这种操作无疑是不安全的。路由导航守卫可以让我们对用户要跳转的路由做一次检查,符合条件后放行,不符合条件则强制用户跳转登录页面。

代码如下:

//在路由对象上 挂载路由导航守卫
router.beforeEach((to,from,next) => {
  //to 将要访问的路径
  //from 代表从哪个路径跳转过来
  //next 是一个函数,表示放行
  //  1.next() 放行   2.next('/login') 强制跳转到login

  if(to.path === '/login') return next();//如果用户访问登录页,直接放行
  const tokenStr = window.sessionStorage.getItem('token')//获取token
  if(!tokenStr) return next('/login')//如果没有token 则强制登录
  next()//如果用户携带了 token 则放行
}) 

猜你喜欢

转载自blog.csdn.net/l1830473688/article/details/105897752
今日推荐