vue路由菜单权限设置就button权限设置
路由权限的设计思路:
首先,我们的需要校验权限的路由的 url
,全部由后端返回,后端会返回当前用户的路由树数组。
前端在进入页面前请求接口,把数据拿到:
其次,前端会维护一个路由映射组件的列表,如果路由中拿到 url, 匹配到了对应的组件,那么将该组件添加到路由对象中去,相当于,前端路由都是动态生成的。
前端拿到这个路由树数组后,进行递归遍历,将路由树里的一级菜单、二级菜单,寻找对应的组件。
// main.js
const vm = new Vue({
router,
store,
i18n,
render: h => h(App),
beforeCreate() {
getMenu(); // 进入系统前,请求接口
}
}).$mount("#app"); // 请求后台接口函数,拿到菜单数据和按钮权限数组,
export const getMenu = async () => {
const req: any = {};
return new Promise(resolve => {
Http.get(Url.base.getMenu, req).then((response: AxiosResponse) => {
let result = response.data;
if (result.code === Code.SUCCESS) {
let resultMap = {};
let menu = result.data.menuInfoMapList; // 拿到菜单 url 的 list map
let permission = result.data.operateMapList; // 拿到按钮权限数据的数组
let formatedRoutes = formatRoutes(menu); // 递归菜单,格式化后的菜单树,
let formatedPermission = formatPermission(permission); // 权限数组
resultMap = {
formatedRoutes,
formatedPermission
};
router.addRoutes(formatedRoutes); // 利用 vue-router 的 addRoutes 方法,将格式化后的代码添加到路由对象中
store.commit("base/saveMenu", formatedRoutes); // 将格式化的菜单树放入状态管理中保存。
store.commit("setPermission", formatedPermission); // 将格式化的权限数组也放入状态管理中保存
resolve(resultMap);
} else {
resolve([]);
}
});
});
}; /**
* 格式化菜单数据为 vue-router 路由对象格式
*/
export const formatRoutes = (menu: any) => {
if (!menu) {
return [];
}
let result = menu.map((item: any) => {
let children = [];
if (item.child) {
children = formatRoutes(item.child); // 递归遍历权限树
}
return {
path: item.url || "/layout", // 如果没有 url, 做一个容错处理,避免路由没有 path
component: lazyload(item.url), // loayload 是一个方法,传入 url 作为键,返回 url 对应的组件引用。
meta: {
title: item.name
},
children: children
};
});
return result;
}; 前端拿到的数据大致为:
data: {
menuInfoMapList: [
{
url: "/fruits",
name: "水果",
child: [
{
url: "/fruits/apple", // 二级菜单
name: "苹果"
} ,
{
url: "/fruits/banana", // 二级菜单
name: "香蕉"
}
]
}
],
operateMapList: [
"/eatApple", // 按钮权限 code
"/eatBanana" // 按钮权限 code
]
} // 下面就是 loazload.ts 文件,维护了后台传来的 url, 和页面编写好的 组件位置。导出一个函数,就是上面的 loazload 函数。
const routes: any = {
// ===== 权限管理 =====
"/friuts": () => import("@/layout/Layout.vue"), // 一级菜单的 url 和组件
"/friuts/apple": () => import("@/views/Apple.vue"), // 二级菜单的 url 和组件
"/friuts/banana": () => import("@/views/Banana.vue"), // 二级菜单的 url 和组件
};
export default (path: any) => routes[path]; // 下面是按钮权限的控制,比较简单,就是把按钮的 code) 传入校验函数,校验函数就是判断 按钮的 url 在没有在 后台返回的 url 列表中。
export function authHelper(authCode: string) {
let isExist = store.getters["getPermissionList"].includes(authCode);
return isExist;
} // 页面组件上,通过 权限 code 控制按钮权限
<Button v-if="$authHelper("/eatApple")" @click="handleEat">苹果</Button>
vue路由菜单权限设置就button权限设置的更多相关文章
- vue实现菜单权限控制
大家在做后台管理系统时一般都会涉及到菜单的权限控制问题.当然解决问题的方法无非两种——前端控制和后端控制.我们公司这边的产品迭代速度较快,所以我们是从前端控制路由迭代到后端控制路由.下面我会分别介绍这 ...
- vue路由守卫用于登录验证权限拦截
vue路由守卫用于登录验证权限拦截 vue路由守卫 - 全局(router.beforeEach((to, from, next) =>来判断登录和路由跳转状态) 主要方法: to:进入到哪个路 ...
- vue项目实践-前后端分离关于权限的思路
前后端分离后权限的思路 最近看到许多关于权限的思路,但好像都是使用动态加载路由的方式,现在也分享下我在项目中使用的解决方案. 前后端分离关于权限的处理每个人都不一样,根据项目选择制定合适的方案就好 我 ...
- vue中如何实现后台管理系统的权限控制
vuejs单页应用的权限管理实践 一.前言 在广告机项目中,角色的权限管理是卡了挺久的一个难点.首先我们确定的权限控制分为两大部分,其中根据粒的大小分的更细: 接口访问的权限控制 页面的权限控制 菜单 ...
- 在linux中添加ftp用户,并设置相应的权限
在linux中添加ftp用户,并设置相应的权限,操作步骤如下: 1.环境:ftp为vsftp.被限制用户名为test.被限制路径为/home/test 2.建用户:在root用户下: useradd ...
- redis密码设置、访问权限控制等安全设置
redis作为一个高速数据库,在互联网上,必须有对应的安全机制来进行保护,方法有2,如下. 1.比较安全的办法是采用绑定IP的方式来进行控制. 请在redis.conf文件找到如下配置 # If y ...
- Windows下给鼠标右键菜单添加获得完全控制权限的菜单项
这段时间计算机C分区里多了很多无用的文件,而且不在同一个目录下,搜索出来删除的时候提示没有管理员权限,需要在右键属性里面修改,非常麻烦,于是查询了一下发现可以在文件右键菜单添加一个获取权限的菜单项,这 ...
- linux中添加ftp用户,并设置相应的权限
在linux中添加ftp用户,并设置相应的权限,操作步骤如下: 1.环境:ftp为vsftp.被限制用户名为test.被限制路径为/home/test 2.建用户:在root用户下: useradd ...
- php创建文件夹后设置文件夹权限(转)
原文链接:http://www.phpstudy.net/b.php/69873.html PHP mkdir()无写权限的问题解决方法 使用mkdir创建文件夹时,发现这个函数有两个参数,第二个参数 ...
随机推荐
- 第一章: 初识Java
计算机程序:计算机为完成某些功能产生的一系列有序指令集合. Java技术包括:JavaSE(标准版) JavaEE(企业版) ---JavaME(移动版) 开发Java程序步骤:1.编写 2.编译 3 ...
- handlerAdapter与方法返回值的处理
前提:处理器方法被调用并返回了结果 public void invokeAndHandle(ServletWebRequest webRequest, ModelAndViewContainer ma ...
- webgl图库研究(包括BabylonJS、Threejs、LayaboxJS、SceneJS、ThingJS等框架的特性、适用范围、支持格式、优缺点、相关网址)
3D图库框架范围与示例 摘要: 为实现企业80%以上的生产数据进行智能转化,在烟草.造纸.能源.电力.机床.化肥等行业,赢得领袖企业青睐,助力企业构建AI赋能中心,实现智能化转型升级.“远舢文龙数据处 ...
- @Validated和@Valid的区别?校验级联属性(内部类)
每篇一句 NBA里有两大笑话:一是科比没天赋,二是詹姆斯没技术 相关阅读 [小家Java]深入了解数据校验:Java Bean Validation 2.0(JSR303.JSR349.JSR380) ...
- 【Spring】No converter found for return value of type: class java.util.ArrayList
错误信息: org.springframework.http.converter.HttpMessageNotWritableException: No converter found for ret ...
- 显示Mac隐藏文件的命令:
设置查看隐藏文件的方法如下:打开终端,输入命名 显示Mac隐藏文件的命令:defaults write com.apple.finder AppleShowAllFiles -bool true 隐藏 ...
- 前端工程师和设计师必备的chrome插件
Google Chrome是最好用的几个浏览器之一,今天我来分享下自己收集的一系列Chrome插件,希望对大家的学习和工作有帮助. 注:你可以通过复制链接或者在谷歌商店搜索相应插件的名称来获取以下插件 ...
- 4. 源码分析---SOFARPC服务端暴露
服务端的示例 我们首先贴上我们的服务端的示例: public static void main(String[] args) { ServerConfig serverConfig = new Ser ...
- pipreqs 生成requirements.txt文件时编码错误问题
1,首先安装pipreqs --> pip install pipreqs 2.生成相应项目的路径 --> pipreqs e:\a\b 在此时可能会遇见 UnicodeDecodeE ...
- 完整原型链详细图解之JS构造函数、原型 原型链、实例化对象
一.首先说一下什么是构造函数: 构造函数:用来在创建对象时初始化对象.特点:构造函数名一般为大写字母开头:与new运算符一起使用来实例化对象. 举例: function Person(){} //Pe ...