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实现两个区域滚动条同步滚动
Dec 13 Vue.js
Vue实现手机号、验证码登录(60s禁用倒计时)
Dec 19 Vue.js
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
vue编写简单的购物车功能
Jan 08 Vue.js
Vue常用API、高级API的相关总结
Feb 02 Vue.js
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue首次渲染全过程
Apr 21 Vue.js
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue实现水波涟漪效果的点击反馈指令
May 31 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue 自定义组件添加原生事件
Apr 21 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 如何向 MySQL 发送数据
2006/10/09 PHP
php木马攻击防御之道
2008/03/24 PHP
Yii隐藏URL中index.php的方法
2016/07/12 PHP
用PHP做了一个领取优惠券活动的示例代码
2019/07/05 PHP
Laravel 连接(Join)示例
2019/10/16 PHP
Javascript 更新 JavaScript 数组的 uniq 方法
2008/01/23 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
js更优雅的兼容
2010/08/12 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
Jquery元素追加和删除的实现方法
2016/05/24 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
2016/06/24 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
jQuery元素选择器实例代码
2017/02/06 Javascript
Bootstrap fileinput文件上传组件使用详解
2017/06/06 Javascript
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
Js生成随机数/随机字符串的方法小结【5种方法】
2020/05/27 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
2020/11/01 Javascript
[04:55]完美世界副总裁蔡玮:DOTA2的自由、公平与信任
2013/12/18 DOTA
[00:37]DOTA2上海特级锦标赛 Secert 战队宣传片
2016/03/03 DOTA
Python封装shell命令实例分析
2015/05/05 Python
Python中的自省(反射)详解
2015/06/02 Python
json跨域调用python的方法详解
2017/01/11 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
跑步爱好者一站式服务网站:Jack Rabbit
2016/09/01 全球购物
公司门卫岗位职责
2014/03/15 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
党的群众路线教育实践活动总结大会主持词
2014/10/30 职场文书
专家推荐信怎么写
2015/03/25 职场文书
2016年少先队活动总结
2016/04/06 职场文书
《哪吒之魔童降世》观后感:世上哪有随随便便的成功
2019/11/08 职场文书
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python
MySQL常用慢查询分析工具详解
2022/08/14 MySQL