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+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue在图片上传的时候压缩图片
Nov 18 Vue.js
详解如何在vue+element-ui的项目中封装dialog组件
Dec 11 Vue.js
vue中watch的用法汇总
Dec 28 Vue.js
vue自定义组件实现双向绑定
Jan 13 Vue.js
如何在 Vue 表单中处理图片
Jan 26 Vue.js
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
Feb 11 Vue.js
Vue单页面应用中实现Markdown渲染
Feb 14 Vue.js
手写Vue2.0 数据劫持的示例
Mar 04 Vue.js
详解Vue router路由
Nov 20 Vue.js
Vue 打包后相对路径的引用问题
Jun 05 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 日常开发小技巧
2009/09/23 PHP
CI框架入门示例之数据库取数据完整实现方法
2014/11/05 PHP
php session的锁和并发
2016/01/22 PHP
php fseek函数读取大文件两种方法
2016/10/12 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
BOOM vs RR BO5 第三场 2.14
2021/03/10 DOTA
javascript indexOf函数使用说明
2008/07/03 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
jquery处理json数据实例分析
2014/06/03 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
Vue.js每天必学之组件与组件间的通信
2016/09/08 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
ReactJs快速入门教程(精华版)
2016/11/28 Javascript
js实现日历的简单算法
2017/01/24 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
详解webpack与SPA实践之开发环境搭建
2017/12/18 Javascript
vue2.0.js的多级联动选择器实现方法
2018/02/09 Javascript
node.js博客项目开发手记
2018/03/16 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
python中常用的各种数据库操作模块和连接实例
2014/05/29 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
Python常用算法学习基础教程
2017/04/13 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
python实现可视化动态CPU性能监控
2018/06/21 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
一文读懂Python 枚举
2020/08/25 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
法国设计制造的扫帚和刷子:Andrée Jardin
2018/12/06 全球购物
STP的判定过程
2012/10/01 面试题
请假条格式范文
2014/04/10 职场文书
自荐信格式范文
2015/03/04 职场文书
2015年出纳个人工作总结
2015/04/02 职场文书
物资采购管理制度
2015/08/06 职场文书