vue动态设置路由权限的主要思路


Posted in Vue.js onJanuary 13, 2021

之前看到网上有些动态设置路由的,但是跟目前的项目不是很匹配,就自己动手实现了一种。主要思路就是:

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");
 }
 }
})

总结

到此这篇关于vue动态设置路由权限的文章就介绍到这了,更多相关vue动态设置路由权限内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
如何在vue中使用kindeditor富文本编辑器
Dec 19 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 Vue.js
vue使用echarts画组织结构图
Feb 06 Vue.js
vue实现拖拽进度条
Mar 01 Vue.js
vue 使用饿了么UI仿写teambition的筛选功能
Mar 01 Vue.js
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
详解vue中v-for的key唯一性
May 15 Vue.js
在vue中import()语法不能传入变量的问题及解决
Apr 01 Vue.js
vue实现拖拽交换位置
Apr 07 Vue.js
vue组件是如何解析及渲染的?
Jan 13 #Vue.js
vue实现一个获取按键展示快捷键效果的Input组件
Jan 13 #Vue.js
vue使用vue-quill-editor富文本编辑器且将图片上传到服务器的功能
Jan 13 #Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 #Vue.js
详解为什么Vue中的v-if和v-for不建议一起用
Jan 13 #Vue.js
vue自定义组件实现双向绑定
Jan 13 #Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 #Vue.js
You might like
基于PHP实现栈数据结构和括号匹配算法示例
2017/08/10 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
yii 框架实现按天,月,年,自定义时间段统计数据的方法分析
2020/04/04 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
js倒计时小程序
2013/11/05 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
JS实现生成会变大变小的圆环实例
2015/08/05 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
JS区分浏览器页面是刷新还是关闭
2016/04/17 Javascript
微信小程序开发实战教程之手势解锁
2016/11/18 Javascript
原生js实现网页顶部自动下拉/收缩广告效果
2017/01/20 Javascript
新闻上下滚动jquery 超简洁(必看篇)
2017/01/21 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
nodejs简单访问及操作mysql数据库的方法示例
2018/03/15 NodeJs
vue-cli 使用vue-bus来全局控制的实例讲解
2018/09/15 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
详解如何在vue项目中使用eslint+prettier格式化代码
2018/11/10 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
vue中touch和click共存的解决方式
2020/07/28 Javascript
解决PyCharm中光标变粗的问题
2017/08/05 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
基于numpy.random.randn()与rand()的区别详解
2018/04/17 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
详解Python3 中的字符串格式化语法
2020/01/15 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
《中彩那天》教学反思
2014/02/22 职场文书
法律进学校实施方案
2014/03/15 职场文书
个人投资计划书
2014/05/01 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
初中历史教学反思
2016/02/19 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
python实现会员信息管理系统(List)
2022/03/18 Python