vue-router实现路由管理的一些笔记

router.beforeEach((to, from, next) => {

    let token = sessionStorage.getItem('token');           	//通过存入一个token来判断用户是否登录
    if (!token && to.path != '/login') {
        sessionStorage.removeItem('token');
        next({path: '/login'})                                    //如果没有seesion 和不是从登录进来的 全部重定向为login
        console.log('没有sess 或者不是登录进路由' + sessionStorage.getItem('token'))
    } else {
        if (sessionStorage.getItem("isLogin") == "1" && to.path == '/login') {
            next({path: '/showActivity'});
            Message({
                message: '已返回最前,重新登录请点击右上角头像注销',
                type: 'warning'
            });
            console.log('登录状态为已登录 且返回login时 给他重定向为showActivity')
        } else {
            next()
        }

        if (sessionStorage.getItem("vuexState")) {
            sessionStorage.removeItem("vuexState")
            switch (sessionStorage.getItem('token')) {     
            //这里由于存入session JSON格式转过后vue解析不了转换过后的路由component
            //采取暴力添加routes

                case 'admin':
                    console.log('执行了admin刷新')
                    router.addRoutes([
                        {
                            path: '/',
                            component: Home,
                            name: '管理活动',
                            iconCls: 'el-icon-message', //图标样式class
                            children: [
                                {
                                    path: '/main',
                                    component: Main,
                                    name: '主页',
                                    hidden: true
                                },
                                {
                                    path: '/showActivity',
                                    component: showActivity,
                                    name: '活动管理',
                                    meta: {role: ['admin', 'checkUser']}
                                },
                            ]
                        },
                        {
                            path: '*',
                            hidden: true,
                            redirect: {
                                path: '/404'
                            }
                        }
                    ])
                break;
                case 'wx_op':
                    console.log('执行了wx-op刷新')
                    router.addRoutes([
                        {
                            path: '/',
                            component: Home,
                            name: '管理活动',
                            iconCls: 'el-icon-message', //图标样式class
                            children: [{
                                path: '/main',
                                component: Main,
                                name: '主页',
                                hidden: true
                            },
                                {
                                    path: '/showActivity',
                                    component: showActivity,
                                    name: '活动管理',
                                    meta: {role: ['admin', 'checkUser']}
                                },
                                {
                                    path: '/addActivity',
                                    component: addActivity,
                                    name: '活动配置',
                                    meta: {role: ['admin']}
                                },
                                {
                                    path: '/user',
                                    component: user,
                                    name: '列表'
                                },
                            ]
                        },
                        {
                            path: '/',
                            component: Home,
                            name: '会员管理',
                            iconCls: 'fa fa-id-card-o',
                            children: [
                                {
                                    path: '/showVip',
                                    component: showVip,
                                    name: '会员概览'
                                }, {
                                    path: '/page4',
                                    component: Page4,
                                    name: '红包统计'
                                }
                            ]
                        },
                        {
                            path: '/',
                            component: Home,
                            name: '扫码管理',
                            iconCls: 'fa fa-address-card',
                            children: [{
                                path: '/scanCode',
                                component: scanCode,
                                name: '扫码概览'
                            }]
                        },

                        {
                            path: '/',
                            component: Home,
                            name: '公众号配置',
                            iconCls: 'fa fa-bar-chart',
                            children: [{
                                path: '/echarts',
                                component: echarts,
                                name: 'echarts'
                            }]
                        },
                        {
                            path: '/404',
                            component: NotFound,
                            name: '',
                            hidden: true
                        },
                        {
                            path: '*',
                            hidden: true,
                            redirect: {
                                path: '/404'
                            }
                        }
                    ])

                break;
            }

            console.log("执行了刷新下的路由加载")
            // }
        }
        console.log('路由循环正常')
    }

})