关于vue路由，必须登录才能进去的问题

做项目的时候，有好多页面都是需要登录才能进去的，那么我们可以通过两种方式来实现：
第一种，通过添加白名单的方式.
在permission.js 中添加 const whiteList = [’/login’, ‘/404’] ，[] 里面写白名单路由。
然后在下面进行判断，直接上代码：

  router.beforeEach((to, from, next) => {
    NProgress.start()
    if (getToken()) { //首先判断token 是否为真，
    
        if (to.path === '/login') {
            next({ path: '/' })
            NProgress.done() // 结束Progress
        } else if (!store.getters.role) {
            console.log("is:" + store.getters.role);
            store.dispatch('GetInfo').then(() => {
                next({...to })
            })
        } else {
            next()
        }
    } else if (whiteList.indexOf(to.path) !== -1) {
        //如果前往的路径是白名单内的,就可以直接前往
        next()
    } else {
        //如果路径不是白名单内的,而且又没有登录,就跳转登录页面
        next('/login')
        NProgress.done() // 结束Progress
    }
})

第二种方式，由于做h5 项目的时候，有大部分页面是不需要登陆的，大部分涉及个人操作的页面才需要登录，所以 可通过在路由的页面，添加标识来区分页面是否登陆。该方法主要修改 router/index.js, 看图：

本例我通过添加了 meta 的requierAuth 来区分，如果是false 则不需要登陆，如果为true 则需要登录。修改完路由之后，需要在permission.js 中进行路由过滤。

router.beforeEach((to, from, next) => {
    window.sessionStorage.formQuery = from.path; //记录路由，登录后从哪来让他到哪去
    NProgress.start()
    if (getToken()) {
        //如果已经登录
        if (to.path === '/login') {
            next({ path: '/' })
            NProgress.done() // 结束Progress
        } else {
            // alert()
            next()
        }
    } else if (!to.meta.requireAuth) {
        //如果requireAuth 为false 则直接进入路由
        next()
    } else {
        //如果路径不是白名单内的,而且又没有登录,就跳转登录页面
        next('/login')
        NProgress.done() // 结束Progress
    }
})