Functional requirements
Different users have different permission tables , Can open different pages , Pages without permissions will be redirected to 404
After refreshing, the data is still in the current page
data
Back end return permission table
"operations": [
{
"id": 1,
"path": "/order",
"name": " Order management "
},
{
"id": 2,
"path": "/goods",
"name": " Commodity management "
},
{
"id": 3,
"path": "/cate",
"name": " Classified management "
},
{
"id": 4,
"path": "/client",
"name": " customer management "
},
{
"id": 5,
"path": "/school",
"name": " Campus management "
},
{
"id": 6,
"path": "/store",
"name": " Store management "
},
{
"id": 7,
"path": "/data",
"name": " Business data "
},
{
"id": 8,
"path": "/power",
"name": " Authority management "
},
{
"id": 9,
"path": "/refund",
"name": " Refund management "
}
code
router/index.js
// Static routing
export const constantRouterMap = [
{
path: '/home',
name: ' home page ',
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
})
// Dynamic routing
export const asyncRouteMap = [
{
path: '/order',
name: ' Order management ',
meta: {
isLogin: true
},
component: resolve => require(["@/components/Order"], resolve)
},
{
path: '/goods',
name: ' Commodity management ',
meta: {
isLogin: true
},
// component: require('./').default
component: resolve => require(["@/components/goods/Goods"], resolve)
},
{
path: '/cate',
name: ' Classified management ',
meta: {
isLogin: true
},
component: resolve => require(["@/components/categories/Cate"],
resolve)
},
{
path: '/client',
name: ' customer management ',
// component: require('./').default
component: resolve => require(["@/components/client/Client"],
resolve)
},
{
path: '/school',
name: ' Campus management ',
component: resolve => require(["@/components/school/School"],
resolve)
},
{
path: '/store',
name: ' Store management ',
component: resolve => require(["@/components/store/Store"], resolve)
},
{
path: '/data',
name: ' Business data ',
component: resolve => require(["@/components/Data"], resolve)
},
{
path: '/power',
name: ' Authority management ',
component: resolve => require(["@/components/power/Power"], resolve)
},
{
path: '/Cate/Management',
name: ' Classification details ',
component: CateMan
},
{
path: '/orderDetail',
name: ' Order details ',
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
}]);// Add last Otherwise, a refresh will be directed to 404
})
next()
})
login.vue
this.$store.commit('saveOpera', res.data.operations);
this.$store.commit('saveToken', res.token);
App.vue
mounted() {
// Read on page load sessionStorage Status information in
if (!sessionStorage.getItem("token")) {
this.$Message["error"]({
background: true,
content: " Please log in first "
});
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 }]);
})
}
// When the page is refreshed, the vuex Save the information in the sessionStorage in
window.addEventListener("beforeunload",e=>{
sessionStorage.setItem("token",this.$store.state.token)
sessionStorage.setItem("operations",JSON.stringify(this.$store.state.operations))
})
},
Technology