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'),
      mainheader: MainHeader
    }
  }]

第二步
设置登录保存状态

    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来实现
第三步：
路由登录跳转权限控制
在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()
  }
})

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