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+iview分页组件的封装
Nov 17 Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 Vue.js
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
Dec 04 Vue.js
vue使用exif获取图片经纬度的示例代码
Dec 11 Vue.js
Vue——前端生成二维码的示例
Dec 19 Vue.js
vue element和nuxt的使用技巧分享
Jan 14 Vue.js
如何在 Vue 中使用 JSX
Feb 14 Vue.js
Vue多选列表组件深入详解
Mar 02 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue里使用create, mounted调用方法
Apr 26 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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
php db类库进行数据库操作
2009/03/19 PHP
php启用zlib压缩文件的配置方法
2013/06/12 PHP
php中让上传的文件大小在上传前就受限制的两种解决方法
2013/06/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(十)
2014/06/24 PHP
用html+css+js实现的一个简单的图片切换特效
2014/05/28 Javascript
javascript中Function类型详解
2015/04/28 Javascript
js实现TAB切换对应不同颜色的代码
2015/08/31 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
Web前端开发之水印、图片验证码
2016/11/27 Javascript
Vue.js中数据绑定的语法教程
2017/06/02 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
2018/09/05 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
vue中activated的用法
2021/01/03 Vue.js
[02:40]DOTA2英雄基础教程 先知
2013/11/29 DOTA
python分析网页上所有超链接的方法
2015/05/08 Python
Python批量转换文件编码格式
2015/05/17 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python 爬取微信文章
2016/01/30 Python
Python之Numpy的超实用基础详细教程
2019/10/23 Python
Python列表list操作相关知识小结
2020/01/29 Python
django admin 根据choice字段选择的不同来显示不同的页面方式
2020/05/13 Python
python 还原梯度下降算法实现一维线性回归
2020/10/22 Python
python装饰器代码深入讲解
2021/03/01 Python
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
如果Session Bean得Remove方法一直都不被调用会怎么样
2012/07/14 面试题
幼师自我鉴定范文
2013/10/01 职场文书
厂长岗位职责
2014/02/19 职场文书
优秀党员自我评价范文
2014/09/15 职场文书
2014年安全员工作总结
2014/11/13 职场文书
先进党组织事迹材料
2014/12/26 职场文书
党员活动总结
2015/02/04 职场文书
陪护人员误工证明
2015/06/24 职场文书
军训结束新闻稿
2015/07/17 职场文书
天谕手游15杯全调酒配方和调酒券的获得方式
2022/04/06 其他游戏