©2020-2024 ioDraw All rights reserved
功能要求
不同的用户拥有不同的权限表，能打开不同的页面，没有权限的页面将重定向到404
刷新之后数据还在并且还在当前页面
数据
后端返回权限表
"operations": [
{
"id": 1,
"path": "/order",
"name": "订单管理"
},
{
"id": 2,
"path": "/goods",
"name": "商品管理"
},
{
"id": 3,
"path": "/cate",
"name": "分类管理"
},
{
"id": 4,
"path": "/client",
"name": "客户管理"
},
{
"id": 5,
"path": "/school",
"name": "校园管理"
},
{
"id": 6,
"path": "/store",
"name": "门店管理"
},
{
"id": 7,
"path": "/data",
"name": "经营数据"
},
{
"id": 8,
"path": "/power",
"name": "权限管理"
},
{
"id": 9,
"path": "/refund",
"name": "退款管理"
}
代码
router/index.js
//静态路由
export const constantRouterMap = [
{
path: '/home',
name: '首页',
meta: {
isLogin: true
},
component: Home
},
{
path: '/login',
name: 'Login',
meta: {
isLogin: false
},
component: resolve => require(["@/components/Login"], resolve)
},
{
path: '/',
name: 'Login',
meta: {
isLogin: false
},
component: resolve => require(["@/components/Login"], resolve)
},
{
path: '/404',
name: 'Unfind',
meta: {
isLogin: false
},
component: resolve => require(["@/components/404"], resolve)
},
]
export default new Router({
mode: 'history',
routes: constantRouterMap
})
//动态路由
export const asyncRouteMap = [
{
path: '/order',
name: '订单管理',
meta: {
isLogin: true
},
component: resolve => require(["@/components/Order"], resolve)
},
{
path: '/goods',
name: '商品管理',
meta: {
isLogin: true
},
// component: require('./').default
component: resolve => require(["@/components/goods/Goods"], resolve)
},
{
path: '/cate',
name: '分类管理',
meta: {
isLogin: true
},
component: resolve => require(["@/components/categories/Cate"],
resolve)
},
{
path: '/client',
name: '客户管理',
// component: require('./').default
component: resolve => require(["@/components/client/Client"],
resolve)
},
{
path: '/school',
name: '校园管理',
component: resolve => require(["@/components/school/School"],
resolve)
},
{
path: '/store',
name: '门店管理',
component: resolve => require(["@/components/store/Store"], resolve)
},
{
path: '/data',
name: '经营数据',
component: resolve => require(["@/components/Data"], resolve)
},
{
path: '/power',
name: '权限管理',
component: resolve => require(["@/components/power/Power"], resolve)
},
{
path: '/Cate/Management',
name: '分类详情',
component: CateMan
},
{
path: '/orderDetail',
name: '订单详情',
component: OrderDetail
}
]
vuex/store.js
var state = {
routers: constantRouterMap,
addRouters: [],
operations: [],
token: '',
}
var mutations = {
saveOpera (state, opera) {
state.operations = opera;
},
saveToken(state, token) {
state.token = token;
},
setRouters(state,routers) {
state.addRouters = routers;
state.routers = constantRouterMap.concat(routers);
}
}
var actions = {
GenerateRoutes({commit},data) {
return new Promise(resolve => {
const { operations } = data;
console.log(operations)
const accessedRouters = asyncRouteMap.filter(v => {
for(let i=0;i<operations.length;i++){
if(operations[i].path === v.path)return true;
}
return false;
})
console.log(accessedRouters);
commit('setRouters',accessedRouters);
resolve();
})
}
}
export default new Vuex.Store({
state,
mutations,
actions
})
main.js
router.beforeEach((to, from, next) => {
console.log(store.state.token)
const operations = store.state.operations;
console.log(operations);
store.dispatch('GenerateRoutes', { operations }).then(() => {
console.log(store.state.addRouters);
router.addRoutes(store.state.addRouters);
router.addRoutes([{ path: '*', redirect: '/404', hidden: true
}]);//最后添加 不然一刷新就会定向到404
})
next()
})
login.vue
this.$store.commit('saveOpera', res.data.operations);
this.$store.commit('saveToken', res.token);
App.vue
mounted() {
//在页面加载时读取sessionStorage里的状态信息
if (!sessionStorage.getItem("token")) {
this.$Message["error"]({
background: true,
content: "请先登录"
});
this.$router.push('/login');
} else {
this.$store.commit('saveOpera',
JSON.parse(sessionStorage.getItem("operations")));
this.$store.commit('saveToken', sessionStorage.getItem("token"));
const operations = this.$store.state.operations;
this.$store.dispatch('GenerateRoutes', { operations }).then(() => {
this.$router.addRoutes(this.$store.state.addRouters);
this.$router.addRoutes([{ path: '*', redirect: '/404', hidden: true }]);
})
}
// 在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",e=>{
sessionStorage.setItem("token",this.$store.state.token)
sessionStorage.setItem("operations",JSON.stringify(this.$store.state.operations))
})
},