后台管理系统的权限以及vue处理权限的思路

一般来说，在（后台）管理系统（最早的企业级的项目和网站的后台管理系统现在大部分人都叫后台管理系统）中才会有权限之说。权限分为功能级权限和数据级权限。这篇文章主要谈论功能级权限。

一、名词解释：
权限的意思不用再做解释。

功能级权限：
表示不同的角色（或者用户）进入系统后，看到的功能不一样，或者说，可以操作的功能不一样。有的系统的处理思路是：不能操作的功能就根本不会让你看到；有的系统的处理思路是：你可以看见所有的功能，但是，有些功能的页面根本看不见，操作不成。当然，我个人认为，前者更好。

例如：HIS系统里，医生可以开处方。护士就不可以。
数据级权限：
表示你可以进入某个功能。但是
1、不一定能够看到所有的数据
2、对看到的数据不一定能够进行增删改查的操作。
例如：0A系统中，你只能看到自己的考勤数据，而且，不能添加、修改和删除。但是，人事小姐姐可以看到所有人的考勤数据，而且，还可以做修改等操作。

二、后台管理系统的（功能级）权限处理思路
1．没有前端的时代（前端的人如果看不懂，可以略过此部分）

没有前端的时代，可以认为是全栈时代。那时候，程序员要完成前后端的所有功能。虽说是富客户端（前端），但是，比起现在前端流行的时代，那是小巫见大巫了。

所以，都是有后端的程序来处理权限的。后端程序结合数据库来处理权限的。

思路：
1）需要在数据库中建表，一般包括：
功能表：存储着管理系统的所有功能
角色表：存储着，整个项目的角色，其实就是公司中的角色，如：总经理、市场部经理、市场专员、项目经理、程序员等等。
角色与功能的对应表：这表示的是，什么样的角色具备什么样的功能。
用户表：可以登录管理系统的所有用户，用户表里会存储所属角色。这
样的话，用户和功能之间就有了关系

2）（后端）程序，根据登录的用户名，沿着用户名—>角色—>功能这样的步骤，取到该用户对应的功能。然后，把这些功能显示在导航栏的区域就行，这也就是，用户登录后，只能看到自己具备的功能的思路。

2．前端盛行的当下：
当下，前后端分离。所以，权限可以由后端处理，也可以由前端处理。

1）、后端处理权限的思路：
登录功能–>输入用户名和密码–>前端发送用户名和密码–>后端接收到用户名和密码–>找数据库(验证用户名和密码)–验证通过时–>找数据库（用户名—>角色—>功能）–>获取到该用户的功能–>发送给前端–>前端根据获取到的功能，循环显示出该功能。

2）、前端处理权限的思路（不推荐）：
首先，需要把权限保存在前端，这样会写死。所以，不推荐。

思路：
登录功能–>输入用户名和密码–>前端发送用户名和密码–>后端接收到用户名和密码–>找数据库(验证用户名和密码)–验证通过时–>返回前端（同时，返回角色）–>前端根据角色对应的功能权限，展示对应的功能。

三、使用vue完成后台管理系统的（功能级）权限：

此处，还是以“后端处理权限的思路”，前端仅作功能权限的展示为例，进行描述。

使用vue-router的addRoutes来动态改变路由配置。

1、步骤
1）、默认路由配置里只有登录的配置。

import Vue from 'vue';
import VueRouter from "vue-router";
import Login from "@/pages/Login";
Vue.use(VueRouter); //把vue-router安装到Vue。
// 创建vue-router对象
let router = new VueRouter({mode: "hash", //路由模式routes: [{path: "/",redirect: "/Login"},{path: "/Login",component: Login}]
});export default router;

2）、登录成功后，后端返回功能权限，最好直接就是路由配置，如果不是，前端把功能权限处理成路由配置的json数组格式。
使用vue-router对象的addRoutes方法把该路由配置动态添加到路由对象里。同时，把该路由配置保存到sessionStorage里（防止前端刷新后丢失路由配置）。

axios({url: `/roles`,method: "get",params: {username: this.username,userpass: this.userpass}
}).then(res => {let roles = res.data[0].data;//this.allRoutes是所有的路由配置，可以放在vueX中，以下代码是，根据后端返回的权限，产生该用户对应的路由配置let currRoutes = this.allRoutes.filter(item => {return roles.some(obj => obj.path == item.path);});//把获取到的权限保存到sessionStorage中sessionStorage.setItem("roles", JSON.stringify(roles));//把获取到的权限，动态增加到vue-Router对象里this.$router.addRoutes(currRoutes);this.$router.push("/Home");
});

3）、前端在“App.vue”里的created里，需要读取cookie里或sessionStorage里保存的路由配置，同样需要把读取到的路由配置，使用vue-router对象的addRoutes方法把该路由配置动态添加到路由对象里。这样刷新页面时，就可以在此处获取到当前用户的路由权限。

created() {this.roles = JSON.parse(sessionStorage.getItem("roles"));if (this.roles) {//this.allRoutes是所有的路由配置，可以放在vueX中，以下代码是，根据后端返回的权限，产生该用户对应的路由配置let currRoutes = this.allRoutes.filter(item => {return this.roles.some(obj => obj.path == item.path);});this.$router.addRoutes(currRoutes);}
}

2、特别注意：
一定要把获取到的权限数组存放到sessionStorage。否则，刷新页面时，路由配置就会丢失掉。
以上步骤是经过测试通过的。

陆荣涛前端学习交流Q群858752519
加群备注：CSDN推荐

后台管理系统的权限以及vue处理权限的思路相关推荐

动态后台获取_后台管理系统的权限以及vue处理权限的思路
一般来说,在(后台)管理系统(最早的企业级的项目和网站的后台管理系统现在大部分人都叫后台管理系统)中才会有权限之说.权限分为功能级权限和数据级权限.这篇文章主要谈论功能级权限. 一.名词解释: 权限的 ...
虎跃后台管理系统，数据分发+授权管理+权限管理
虎跃后台管理系统,是一款集数据分发+授权管理+权限管理的系统.支持高并发,搞扩展.支持分布式读写分离. 模式: 应用=>登陆=>设备授权=>合法=>获取数据=>区分账套= ...
基于微信小程序的健身房私教预约管理系统+后台管理系统(SSM+mysql)-JAVA.VUE【毕业设计、论文、源码、开题报告】
摘要计算机技术的飞速发展带动了各种管理软件的兴起,对我们的工作管理.生活都是很大的帮助,本健身房私教预约微信小程序是采用小程序技术开发的对课程购买.预约工作的信息化.数字化管理,以改变传统的纸质预 ...
后台管理系统中的antd vue中的问题(动态加载列表a-select-option,后台管理中a-selct-option的回显)
一.antd vue中的a-select的动态加载列表a-select-option 1.既然是动态加载选择框的列表a-select-option,必然存在获取后台数组,并循环后台数组格式: 数组( ...
《前端》权限链接--vue前端权限控制方案详解附demo_feiyu_may的博客-CSDN博客_vue 前端权限
前端权限控制 - 潘正 - 博客园 https://www.cnblogs.com/guchengnan/p/11800947.html vue前端权限控制方案详解附demo_feiyu_may的博 ...
2023基于微信小程序的校园第二课堂活动报名系统+后台管理系统(Springboot+mysql)-JAVA.VUE(论文+开题报告+运行)
摘要随着信息技术和网络技术的飞速发展,人类已进入全新信息化时代,传统管理技术已无法高效,便捷地管理信息.为了迎合时代需求,优化管理效率,各种各样的管理系统应运而生,各行各业相继进入信息管理时代,基 ...
电商后台管理系统（基于SSM + Vue + Restful + jquery + axios）
1.项目架构 2.config配置 JdbcConfig public class JdbcConfig {@Value("${jdbc.driver}")private Stri ...
最新2023基于微信小程序的学生公寓生活管理系统+后台管理系统(SSM+mysql)-JAVA.VUE(毕业设计+论文+开题报告+运行)
摘要随着信息化时代的到来,管理系统都趋向于智能化.系统化,学生公寓生活管理也不例外,但目前国内的市场仍都使用人工管理,市场规模越来越大,同时信息量也越来越庞大,人工管理显然已无法应对时代的变化,而 ...
2023基于微信小程序的中医药配方+后台管理系统(SSM+mysql)-JAVA.VUE(论文+开题报告+运行)
摘要随着信息化时代的到来,管理系统都趋向于智能化.系统化,中医药配方小程序也不例外,但目前国内的市场仍都使用人工管理,市场规模越来越大,同时信息量也越来越庞大,人工管理显然已无法应对时代的变化,而 ...

后台管理系统的权限以及vue处理权限的思路

后台管理系统的权限以及vue处理权限的思路相关推荐

最新文章

热门文章