后台管理系统的权限及vue处理权限实例分析
这篇文章主要介绍了后台管理系统的权限及vue处理权限实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇后台管理系统的权限及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。否则，刷新页面时，路由配置就会丢失掉。
以上步骤是经过测试通过的。
关于"后台管理系统的权限及vue处理权限实例分析"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"后台管理系统的权限及vue处理权限实例分析"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。
