Main Ideas of Dynamic Setting Routing Permission in vue
- 2021-10-24 18:46:33
- OfStack
I saw some dynamic routing on the Internet before, but it is not very matched with the current project, so I realized one by myself. The main idea is:
1. When configuring the route, bind id. After the back-end development is completed, synchronize id with the back-end. This id only remains unchanged. According to this id, you can find the routing address and icon.
const routerArr = [
{
path: '',
name: '',
component: () => import( /* webpackChunkName: "strategiesMaintain" */ '@/components/Layout/Index'),
meta: {
requireAuth: true,
id: 1,
icon: 'iconzhanghuguanli',
title: ' Route 1'
},
children: [{
path: '/verificationLog',
name: 'VerificationLog',
component: () => import( /* webpackChunkName: "verificationLog" */ '@/views/auditManage/verificationLog'),
meta: {
requireAuth: true,
id: 101,
icon: 'icon-disanfangyanzhengrizhi',
title: ' Route 11'
}
}, {
path: '/systemLog',
name: 'SystemLog',
component: () => import( /* webpackChunkName: "systemLog" */ '@/views/auditManage/systemLog'),
meta: {
requireAuth: true,
id: 102,
icon: 'icon-xitongcaozuorizhi',
title: ' Route 12'
}
}]
}
];
export default routerArr;
2. Set up the connection between the local route and the route from the back end, mainly according to the binding route address of id and iconClass
import routerModules from "@/router/modules";
import {http} from '@/utils/http'
import store from '@/store';
import { Message } from 'element-ui'
const formateResData = (val) =>{ // Formatting routing data
const obj = {};
const fn = (arr)=>{
for(let i = 0,item;item = arr[i++];){
obj[item['meta']['id']] = {
path: item['path'],
iconClass: item['meta']['icon']
};
if(item.children && item.children.length > 0){
fn(item.children);
}
}
}
fn(val);
return obj;
};
const MAPOBJ = formateResData(routerModules);
const dealWithData = (navData) => { // Processing menu data
let firstLink = "";
const navIdArr = [];
const fn = (arr) => {
for (let i = 0,item;item = arr[i++];) {
item['iconClass'] = MAPOBJ[item.id].iconClass;
item['linkAction'] = MAPOBJ[item.id].path;
navIdArr.push(item.id);
if (!firstLink && !item.subMenu) { // Set default jump
firstLink = item['linkAction'];
}
if (item.subMenu && item.subMenu.length > 0) {
fn(item.subMenu);
}
}
}
fn(navData);
return {navData,navIdArr,firstLink};
};
let navIds = [];
const getNav = async (to={},from={},next=()=>{})=>{ // Get navigation data
const {code,data} = await http("/menu/list", {}, "GET"); // Get menu data
// const data = require("@/mock/api/menuData"); // Use mock Data
const {navData,navIdArr,firstLink} = dealWithData(data);
store.commit('setNavData', navData);
navIds = navIdArr;
if(to.fullPath == '/index'){ // Come from login Or go back to the front page
next(firstLink);
}else { // Refresh
if(navIds.indexOf(to.meta.id) == -1){ // The backend did not return the menu
Message.error(' Menu does not exist or has no permissions ');
return;
}
next();
}
}
export const setGuard = (to={},from={},next=()=>{}) =>{ // Set permissions
if(navIds.length === 0){ // Menu data has not been retrieved yet
getNav(to,from,next);
}else { // Get menu data
if(navIds.indexOf(to.meta.id) == -1){ // The backend did not return the menu
Message.error(' Menu does not exist or has no permissions ');
return;
}
next();
}
}
3. Introducing configuration in mainjs
router.beforeEach((to, from, next) => {
let token = wlhStorage.get("authorization");
if (to.path == "/login") {
storage.clear();// Empty the cache
next();
} else {
if (to.meta.requireAuth && token) { // Landing
setGuard(to,from,next);
} else { // No login
next("/login");
}
}
})
Summarize