大家好，这里是修真院前端小课堂，今天给大家分享的是
《前端如何管理用户权限》
一、背景介绍
问题： 假如在做一个管理系统，面向老师学生的，学生提交申请，老师负责审核（或者还需要添加其他角色，功能权限都不同）。 现在的问题是，每种角色登录看到的界面应该都是不一样的，那这个页面的区分如何实现呢？，
我的想法是在一套完整的页面判断权限控制显示隐藏。但是，这样的话，不同角色就是用的同一套前端代码， 所以请求都一样了，但是不同角色的请求都不一样（比如学生查询显示自己的，教师查询显示所有的）， 这是否意味着需要通过后台进行用户判断，对同样的请求参数调用不同的方法处理。 另一个方案是，对不同的用户采用独立的页面，这样就会产生大量重复的代码，感觉不可取。 所以想问一下有什么解决方案？
二、知识剖析
权限的设计中比较常见的就是 RBAC 基于角色的访问控制，基本思想是，对系统操作的各种权限不是直接授予具体的用户，而是在用户集合与权限集合之间建立一个角色集合。每一种角色对应一组相应的权限。 一旦用户被分配了适当的角色后，该用户就拥有此角色的所有操作权限。这样做的好处是，不必在每次创建用户时都进行分配权限的操作，只要分配用户相应的角色即可，而且角色的权限变更比用户的权限变更要少得多，这样将简化用户的权限管理，减少系统的开销。
三、常见问题
那我们前端能做的有什么呢？
四、解决方案
我们来简单讲一下在我们使用的 angular 框架里边，如何进行用户权限管理
五、编码实战
我们来简单讲一下在我们使用的 angular 框架里边，如何进行用户权限管理
大概思路
1. UI 处理 (根据用户拥有的权限，判断页面上的一些内容是否显示)
2. 路由处理 (当用户访问一个它没有权限访问的 url 时，跳转到一个错误提示的页面)
3. HTTP 请求处理 (当我们发送一个数据请求，如果返回的 status 是 401 或者 403, 则通常重定向到一个错误提示的页面)
首先需要在 Angular 启动之前就获取到当前用户的所有的 permissions, 然后比较优雅的方式是通过一个 service 存放这个映射关系。对于 UI 处理一个页面上的内容是否根据权限进行显示，我们应该通过一个 directive 来实现。当处理完这些，我们还需要在添加一个路由时额外为其添加一个 "permission" 属性，并为其赋值表明拥有哪些权限的角色可以跳转这个 URL, 然后通过 Angular 监听 routeChangeStart 事件来进行当前用户是否拥有此 URL 访问权限的校验。最后还需要一个 HTTP 拦截器监控当一个请求返回的 status 是 401 或者 403 时，跳转页面到一个错误提示页面.
在 Angular 运行之前获取到 permission 的映射关系
var permissionList;
angular.element(document).ready(function() {
$.get('/api/UserPermission', function(data) {
permissionList = data;
angular.bootstrap(document, ['App']);
});
});
进一步使用上面的代码可以将获取到的映射关系放入一个 service 作为全局变量来使用.
// app.js
var app = angular.module('myApp', []), permissionList;
app.run(function(permissions) {
permissions.setPermissions(permissionList)
});
angular.element(document).ready(function() {
$.get('/api/UserPermission', function(data) {
permissionList = data;
angular.bootstrap(document, ['App']);
});
});
// common_service.js
angular.module('myApp')
.factory('permissions', function ($rootScope) {
var permissionList;
return {
setPermissions: function(permissions) {
permissionList = permissions;
$rootScope.$broadcast('permissionsChanged')
}
};
});
如何确定 UI 组件的依据权限进行显隐
这里我们需要自己编写一个 directive, 它会依据权限关系来进行显示或者隐藏元素.
angular.module('myApp').directive('hasPermission', function(permissions) {
return {
link: function(scope, element, attrs) {
if(!_.isString(attrs.hasPermission))
throw "hasPermission value must be a string";
var value = attrs.hasPermission.trim();
var notPermissionFlag = value[0] === '!';
if(notPermissionFlag) {
value = value.slice(1).trim();
}
function toggleVisibilityBasedOnPermission() {
var hasPermission = permissions.hasPermission(value);
if(hasPermission && !notPermissionFlag || !hasPermission && notPermissionFlag)
element.show();
else
element.hide();
}
toggleVisibilityBasedOnPermission();
scope.$on('permissionsChanged', toggleVisibilityBasedOnPermission);
}
};
});
路由上的依权限访问
这一部分的实现的思路是这样：当我们定义一个路由的时候增加一个 permission 的属性，属性的值就是有哪些权限才能访问当前 url. 然后通过 routeChangeStart 事件一直监听 url 变化。每次变化 url 的时候，去校验当前要跳转的 url 是否符合条件，然后决定是跳转成功还是跳转到错误的提示页面.app.config (function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'views/viewCourses.html',
controller: 'viewCoursesCtrl'
})
.when('/unauthorized', {
templateUrl: 'views/error.html',
controller: 'ErrorCtrl'
})
.when('/courses/:id/edit', {
templateUrl: 'views/editCourses.html',
controller: 'editCourses',
permission: 'Edit'
});
});
父层 Controller
app.controller('mainAppCtrl', function($scope, $location, permissions) {
$scope.$on('$routeChangeStart', function(scope, next, current) {
var permission = next.$$route.permission;
if(_.isString(permission) && !permissions.hasPermission(permission))
$location.path('/unauthorized');
});
});
七、参考文献
Angular 中在前后端分离模式下实现权限控制 - 基于 RBAC
【更多内容，可以加入IT交流群565734203与大家一起讨论交流】
【这里是技能树·IT修真院：IT修真院官网，初学者转行到互联网的聚集地】