Vue 路由权限控制，只能从登陆页面进入

1、设置路由是否需要校验的阙值：

　　在路由配置上加上 meta 的判断：

routes: [{
    path: '/',
    name: 'Login',
    component: () => import('@/pages/login/login')
  }, {
    path: '/home',
    name: 'Home',
    meta: {requireAuth: true},
    components: {
      default: () => import('@/pages/home/home')
    }
  }]

2、设置登录保存状态：

    let loginstatus = true
    this.$store.commit('setRouting', loginstatus)

    // 在vuex文件中
    loginstatus: sessionStorage.getItem('loginstatus') || false

    setRouting (state, loginstatus) {
      state.loginstatus = loginstatus
      sessionStorage.setItem('loginstatus', loginstatus)
    }    　

　　这里为什么用sessionStorage存储，而不是localStorage、因为localStorage是永久的存储，如果用它做判断条件，失去了做权限的意义。
sessionStorage当页面关闭后，存储的数据就会消失，适合用来判断是否登录，还有一点，vue项目的是单页面应用，所以可以使用sessionStorage来实现

3、路由登陆跳转权限控制：

　　在main.js 中设置路由配置：

// 配置路由权限
router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if (sessionStorage.getItem('loginstatus')) { // 判断本地是否存在access_token
      next()
    } else {
      // 未登录,跳转到登陆页面，并且带上 将要去的地址，方便登陆后跳转。
      next({
        path: '/',
        query:{ referrer: to.fullPath}
      })
    }
  } else {
    next()
  }
})

在除去登录页面之外的路由都设置meta，就可以实现只能从登录页面登录了。