Vue路由 --登录状态的判断

前言: 在登录一个系统，要求第一次登录出现登录页面，之后再访问该系统，跳过登录页面。

一.   router/index.js路由加校验

export default new Router({
    mode: 'history',
    base: '/',
    routes: [{
            path: '/Login',
            name: 'Login',
            component: Login
        }, {
            path: '/',
            name: 'Home',
            component: Home,
            children: [{
                    path: '/home/income',
                    name: 'Income',
                    component: Income,
                    meta: {
                        requiresAuth: true // 是否需要判断是否登录
                    }
                }, {
                    path: '/',
                    redirect: {
                        name: 'Income'
                    }
                },
                /** 收益列表   start**/
                {
                    path: '/home/list',
                    name: 'IncomeList',
                    component: IncomeList
                },
                /** 收益列表   end**/
                /** 提现首页  start   **/
                {
                    path: '/withdraw/index',
                    name: 'WithdrawIndex',
                    component: WithdrawIndex
                }
                /** 提现首页  end **/
            ]
        }, {
            /** 提取现金  start**/
            path: '/withdraw/cash',
            name: 'WithdrawCash',
            component: WithdrawCash
            /** 提取现金  end**/
        },
        /** 银行卡列表   start**/
        {
            path: '/withdraw/cardList',
            name: 'WithdrawCardList',
            component: WithdrawCardList
        },
        /** 银行卡列表   end**/
        /** 我的银行卡   start**/
        {
            path: '/withdraw/addCard',
            name: 'WithdrawAddCard',
            component: WithdrawAddCard
        },
        /** 我的银行卡   end**/
        /** 提现成功  start  **/
        {
            path: '/withdraw/success',
            name: 'WithdrawSuccess',
            component: WithdrawSuccess
        }
        /** 提现成功   end**/
    ]
})

二.main.js判断该路由是否需要登录

router.beforeEach((to, from, next) => {
    let token = localStorage.getItem('token');
    let path = to.path;
    if (path == '/Login') {
        next();
        return;
    }      //以防无限循环
    if (token) {
        next();
    } else {
        next({
            path: '/Login'
        })
    }
})