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('路由循环正常')
}
})