之前看到网上有些动态设置路由的，但是跟目前的项目不是很匹配，就自己动手实现了一种。主要思路就是：
1.配置路由的时候绑定好id，可后端开发完成后，与后端同步id就行，这id唯一不变，根据此id可找到路由地址及icon。
const routerArr = [
{
path: '',
name: '',
component: () => import( /* webpackChunkName: "strategiesMaintain" */ '@/components/Layout/Index'),
meta: {
requireAuth: true,
id: 1,
icon: 'iconzhanghuguanli',
title: '路由1'
},
children: [{
path: '/verificationLog',
name: 'VerificationLog',
component: () => import( /* webpackChunkName: "verificationLog" */ '@/views/auditManage/verificationLog'),
meta: {
requireAuth: true,
id: 101,
icon: 'icon-disanfangyanzhengrizhi',
title: '路由11'
}
}, {
path: '/systemLog',
name: 'SystemLog',
component: () => import( /* webpackChunkName: "systemLog" */ '@/views/auditManage/systemLog'),
meta: {
requireAuth: true,
id: 102,
icon: 'icon-xitongcaozuorizhi',
title: '路由12'
}
}]
}
];
export default routerArr;
2.设置本地路由与后端传来的路由的联系，主要是根据id绑定路由地址及iconClass
import routerModules from "@/router/modules";
import {http} from '@/utils/http'
import store from '@/store';
import { Message } from 'element-ui'
const formateResData = (val) =>{ // 格式化路由数据
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) => { // 处理菜单数据
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) { // 设置默认跳转
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=()=>{})=>{ // 获取导航数据
const {code,data} = await http("/menu/list", {}, "GET"); // 获取菜单数据
// const data = require("@/mock/api/menuData"); // 使用mock数据
const {navData,navIdArr,firstLink} = dealWithData(data);
store.commit('setNavData', navData);
navIds = navIdArr;
if(to.fullPath == '/index'){ // 从登录过来 或者是回首页
next(firstLink);
}else { // 刷新
if(navIds.indexOf(to.meta.id) == -1){ // 后端没有返回该菜单
Message.error('菜单不存在或者没有权限');
return;
}
next();
}
}
export const setGuard = (to={},from={},next=()=>{}) =>{ // 设置权限
if(navIds.length === 0){ // 还没有获取菜单数据
getNav(to,from,next);
}else { // 获取到菜单数据
if(navIds.indexOf(to.meta.id) == -1){ // 后端没有返回该菜单
Message.error('菜单不存在或者没有权限');
return;
}
next();
}
}
3.在mainjs中引入配置
router.beforeEach((to, from, next) => {
let token = wlhStorage.get("authorization");
if (to.path == "/login") {
storage.clear();// 清空缓存
next();
} else {
if (to.meta.requireAuth && token) { // 登陆
setGuard(to,from,next);
} else { // 没有登录
next("/login");
}
}
})
总结
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“vue动态设置路由权限的主要思路”评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。