vue路由导航守卫以及token的调用和使用

token是我们在登录成功后，服务器发送的一段数据，我们可以从接口中得到这个token数据，然后我们将token储存在sessionStorage中去。
得到token的代码如下：（这段代码往往在调用接口中使用，一般是登录页面）

 this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('login', this.loginForm)
        if (res.meta.status !== 200) return this.$message.error('登录失败！')
        this.$message.success('登录成功')
        // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中
        //   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
        //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中  token是从服务器得来的
        window.sessionStorage.setItem('token', res.data.token)
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')
      })

而我们需要在路由router.js中编写路由导航，这样在判断用户是否登录之后才可以访问其他页面，代码如下：

    // 为路由对象添加路由导航守卫
router.beforeEach((to, from, next) => {
    // 如果用户访问的是登录页面 直接放行
    if (to.path === '/login') return next();
    // 从sesstionStorage中得到token
    const token = sessionStorage.getItem('token');
    // 如果没有token值 那么就跳转到'/login
    if (!token) return next('/login');
    // 如果有token则放行
    next();
})