Vue实现路由导航守卫(检测token，强制跳转)

在做后台管理系统的时候，为了防止用户通过地址路由访问而跳过了登录页面，所以要进行token的检查
此时我们就需要路由导航守卫

// 挂在路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from 代表从哪个路径跳转而来
  // 访问登录页面 直接放行
  if (to.path === '/login') return next()
  const tokenStr = window.sessionStorage.getItem('token')
  // 没有token， 强制转到login页面
  if (!tokenStr) return next('/login')
  next()
})

如果检测到当前页面没有token，则强制跳转到 login页面
在发送登录请求的时候，如果登录成功，则要把token保存下来

// 将登陆成功之后的token，保存到客户端的 sessionStorage 中
 // token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage
window.sessionStorage.setItem('token', res.data.token)
 // 通过编程式导航跳转到后台主页，路由地址是 /home
this.$router.push('/home')

在登陆成功后，我们可以看到token是被保存下来了的

如果删除token，则页面就会强制跳转到登录界面