index.js
3.73 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
import i18n from "@/i18n";
/* Layout */
import Layout from "@/layout";
import store from '@/store'
//业务文件
import * as routeConfig from "@/utils/routeConfig";
import * as perApi from "@/api/systemPermission/userPermission";
/**
* Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
后续有新增路径配置写在 src\utils routeConfig.js文件 serverRoutesConfig 变量
*/
export const sysDefaultRoutes = [
{
path: "/login",
component: () => import("@/views/login/index"),
hidden: true,
},
{
path: "/",
component: Layout,
redirect: "/mainPage",
name: "main",
children: [
{
path: "mainPage",
name: "mainPage",
component: () => import("@/views/main/index"),
meta: {
title: "system.mainPage",
icon: "el-icon-house",
affix: true,
},
},
],
},
{
path: "/system/index",
component: Layout,
hidden: true,
redirect: "noredirect",
children: [
{
path: "system",
component: (resolve) => require(["@/views/systemPermission/index"], resolve),
name: "system",
meta: { title: "授权", icon: "" },
},
],
}
];
export const asyncRoutes = []
const createRouter = () =>
new Router({
// mode: 'history', // require service support
scrollBehavior: () => ({ y: 0 }),
routes: sysDefaultRoutes,
});
const router = createRouter();
let flag = 0
router.beforeEach((to, from, next) => {
debugger
//没有登入跳转到登入页面
const token = store.getters.token
// 1. 检查是否已登录
if (!token) {
if (to.path === '/login') {
next()
} else {
next(`/login?redirect=${encodeURIComponent(to.fullPath)}`)
}
return
}
if (to.path !== '/login') {
if (flag == 0) {
getPermissionData(() => {
next({ ...to, replace: true })
})
flag++
} else {
next()
}
} else {
next();
}
});
// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
const newRouter = createRouter();
router.matcher = newRouter.matcher; // reset router
}
export default router;
//获取用户权限，在登入页面登入成功后调用 getPermissionData
export function getPermissionData(callBack) {
// 1. 检查是否已登录
if(!store.getters.token) {
next(`/login`)
return // 直接终止后续逻辑
}
perApi.getPermissions().then((res) => {
if (res.code !== 'Success') {
sessionStorage.removeItem('sys_menu_per_data')
this.$message.error("权限数据读取失败原因:" + res.msg);
return
}
debugger
// 接口数据转换 vue路由结构数据格式
const serverRoutesData = routeConfig.generatePermissionRoutes(res, routeConfig.serverRoutesConfig);
const result = [
...serverRoutesData,
routeConfig.sys_outesMapConfig,
routeConfig.sys_routes404Config
];
// 重置路由，并重新添加静态和动态路由
resetRouter();
router.addRoutes(result);
// 存储到Vuex和localStorage
store.commit('permission/SET_ROUTES_Routes', result);
localStorage.setItem('sys_menu_per_data', JSON.stringify(result));
callBack();
});
}