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.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
vue使用element-ui实现表单验证
Dec 13 Vue.js
vue实现图片裁剪后上传
Dec 16 Vue.js
vue实现登录功能
Dec 31 Vue.js
vue3 watch和watchEffect的使用以及有哪些区别
Jan 26 Vue.js
vue项目实现分页效果
Mar 24 Vue.js
Vue3 Composition API的使用简介
Mar 29 Vue.js
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
vue elementUI表格控制对应列
Apr 13 Vue.js
vue特效之翻牌动画
Apr 20 Vue.js
使用vuex-persistedstate本地存储vuex
Apr 29 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
jq的get传参数在utf-8中乱码问题的解决php版
2008/07/23 PHP
php中通过curl模拟登陆discuz论坛的实现代码
2012/02/16 PHP
PHP中使用CURL获取页面title例子
2015/01/07 PHP
php从csv文件读取数据并输出到网页的方法
2015/03/14 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
php array_keys 返回数组的键名
2016/10/25 PHP
Yii2中datetime类的使用
2016/12/17 PHP
使用php完成常见的文件上传功能(推荐)
2017/01/13 PHP
Laravel中log无法写入问题的解决
2017/06/17 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
Thinkphp 3.2框架使用Redis的方法详解
2019/10/24 PHP
javascript 面向对象继承
2009/11/26 Javascript
javaScript如何处理从java后台返回的list
2014/04/24 Javascript
JQuery中extend的用法实例分析
2015/02/08 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
JavaScript生成图形验证码
2020/08/24 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
vue.js获得当前元素的文字信息方法
2018/03/09 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
17道题让你彻底理解JS中的类型转换
2019/08/08 Javascript
详解vuex数据传输的两种方式及this.$store undefined的解决办法
2019/08/26 Javascript
JS实现星星海特效
2019/12/24 Javascript
Python与shell的3种交互方式介绍
2015/04/11 Python
Python脚本实时处理log文件的方法
2016/11/21 Python
python中pika模块问题的深入探究
2018/10/13 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
简单了解python代码优化小技巧
2019/07/08 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
水果超市创业计划书
2014/01/27 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
Python import模块的缓存问题解决方案
2021/06/02 Python
Python使用Web框架Flask开发项目
2022/06/01 Python
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android