在vue中使用token认证方法设置路由导航守卫实现路由拦截

---

前言

设置路由导航守卫是防止用户通过修改路径直接绕过登陆界面的有效方法

---

一、如何设置

代码如下：

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

  if (to.path === '/login') return next();
  //获取token
  const tokenStr = window.sessionStorage.getItem('token')
  //如果没有获取到token那么返回登录
  if (!tokenStr) return next('/login')
  //得到token就跳转页面，放行
  next()
})

二、如何工作

图中可见目前正处于登录界面，右侧控制台中页面所存储的token并没有显示，即key/value区域。
我们输入设置好的帐号以及密码，点击登录
在登陆成功后token会保存到客户端的 sessionStorage 中
我们会发现下图中出现了token，并且页面的路径也发生了跳转

此时我们点击图中value上方X左侧的（Clear All）按钮后会清除token值
路由守卫就检测不到token，页面就会强制跳转至登录页

三.出现报错

这个错误的意思是"超出最大调用堆栈大小"
具体解决方法可以参考这一篇文章
vue报错–Maximum call stack size exceeded超出最大调用堆栈大小

内容持续更新中…

文章内容仅个人观点
2022.6.16