vue设置全局路由导航守卫

vue设置全局路由导航守卫

​ 1、首先在对应组件中（ Login.vue 组件）中，在登录事件触发时，保存token

// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
//   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
//   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        window.sessionStorage.setItem('token', res.data.token)
// 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')

​2、然后在router.js 中，在暴露所有路由前设置路由导航守卫

export default router

// 挂载路由导航守卫
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')
  next()
})