【应用】使用 vue-router 之导航守卫 + meta + localStorage 实现在未登录状态下跳转到登录页面的功能

 vue-router 之导航守卫的官网地址

具体实现：

1.router.js文件

在定义路由的时候，加上 meta: {requireAuth: true}，定义一个完整路由的代码如下所示 ：

    {
      path: '/HelloWorld',
      name: 'HelloWorld',
      component: HelloWorld,
      meta: {requireAuth: true}
    }

2.main.js文件

router.beforeEach((to, from, next) => {
  console.log('上一个页面：', from)
  console.log('下一个页面：', to)

  let userToken = localStorage.getItem('userToken')

  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    console.log('main-token：', userToken)
    if (userToken) { // 判断本地是否存在token
      next()
    } else {
      next({
        path: '/Login'
      })
    }
  } else {
    next()
  }

  /* 如果本地存在token,则不允许直接跳转到登录页面 */
  if (to.fullPath === '/Login') {
    if (userToken) {
      next({
        path: from.fullPath
      })
    } else {
      next()
    }
  }
})

注：上述代码中涉及到的userToken需要在登录请求成功之后将后台返回的token保存到localStorage中，代码如下所示 ：

localStorage.setItem('userToken', token)

这样，就可以通过 localStorage.getItem('userToken') 来获取userToken了。

END