后台管理系统的权限及vue处理权限实例分析

这篇文章主要介绍了后台管理系统的权限及vue处理权限实例分析的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇后台管理系统的权限及vue处理权限实例分析文章都会有所收获，下面我们一起来看看吧。

成都一家集口碑和实力的网站建设服务商，拥有专业的企业建站团队和靠谱的建站技术，10年企业及个人网站建设经验 ,为成都近1000家客户提供网页设计制作,网站开发,企业网站制作建设等服务,包括成都营销型网站建设，品牌网站建设，同时也为不同行业的客户提供网站设计制作、成都网站设计的服务,包括成都电商型网站制作建设,装修行业网站制作建设，传统机械行业网站建设,传统农业行业网站制作建设。在成都做网站,选网站制作建设服务商就选创新互联公司。

　　一、名词解释：

权限的意思不用再做解释。

　　功能级权限：

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

例如：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处理权限实例分析”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注创新互联行业资讯频道。