vue-router导航路由守卫使用

以下内容仅作为个人学习使用：

1. 登录页面的请求代码：

async handleLogin () {
      this.$refs.loginForm.validate(async (valid) => {
        if (valid) {
          this.loading = true
          let res = await loginApi(this.loginForm)
          if (res.status == 200) {
            this.$message({
              message: '登录成功',
              type: 'success'
            });
            sessionStorage.setItem('Token', JSON.stringify(res.data))
            this.$router.replace('/home')
          } else {
            this.$message.error(res.msg)
            this.loading = false
          }
        }
      })
    },

2. 设置导航路由守卫(获取token):

// 挂载路由导航守卫
// to 将要访问的路径
// from 代表从哪个路径跳转而来
// next 是个函数，表示放行 next() 放行  next('/login') 强制跳转
router.beforeEach((to, from, next) => {
  if (to.path.startsWith('/login')) {
    window.sessionStorage.removeItem('Token')
    next()
  } else {
    let user = window.sessionStorage.getItem('Token')
    if (!user) {
      next({
        path: '/login'
      })
    } else {
      return next()
    }
  }
});