前言
其实一开始叫我用Angular写后台项目我是拒绝的，因为我不会呀！后来我就学了一下，发现还不错，就尝试地去写。后来又想，有没有什么方式去让我能够优雅地去写Angular呢?毕竟编程的世界里，优雅地编程是非常重要的。最终我找到了generator-es6-angular这样的一个框架。该框架是用ES6编写，最终用webpack打包的。框架我不会详细讲，因为文章的重点在于后半部分，实现权限管理，讲解内容会用ES6讲解，之所以使用ES6，除了能够优雅地编程之外，它的语法还跟面向对象语言非常接近，还是比较容易看懂的，里面会有一些内容涉及到generator-es6-angular，但核心内容不会依赖于这个框架。
要求
我默认你已经会Angular，用Angular写过项目，并且知道如何使用ui-router和编写自定义服务和自定义指令了，因为下面的内容都会围绕这些展开。
开始
首先要说明的是，要实现权限控制必须要接口配合，即接口本身是实现了权限控制的，并非所有人都能调用接口，因为我这个权限控制职能控制页面元素的显隐以及路由拦截，如果强行调用接口而接口本身没实现权限控制也是白搭，这点要明确。
什么是权限
权限说白了就是这个人什么能做，什么不能做。在设计的层面就分为资源、角色、组织、用户（排名不分先后）。
资源（Resource）：我一般把它们分为菜单，功能，接口，它们的关系可这样理解菜单是页面导航的内容，点击这个菜单会跳到一个页面，这个页面有增、删、查、改这些功能，每个功能会调用一个或多个接口。
角色（Role）：就是代表一系列可执行的操作的集合，用于限定用户在系统中能做什么、不能做什么。用户帐号往往与一个或多个角色相关联，因此，一个用户在系统中能做什么取决于与之关联的各个角色，所以所谓授权是授予角色。
组织（Organization）：这个可以理解为角色的集合，如果多个用户需要授予多个角色，可将这多个角色加入某个组织，然后对用户授予组织。
用户（User）：就是使用系统的用户啦
以上，都是我猜的。然后你看不懂其实也没关系，因为我其实也没写过，项目都是提供接口，我负责接接口就行了，如果你想了解的话可以去看看SpringSecurity，因为我做项目的接口用的就是SpringSecurity，如果看不懂还可以看看Shiro，（据说）比SpringSecurity简单。
接口需要如何配合
接口需要提供一个接口返回用户拥有哪些权限，一般是资源的标识符列表，一般考虑效率会一层一层返回，即一开始会返回第一级别（upId=0）权限，进入了某个菜单后向接口发起请求，接口再返回对应的下级权限标识符列表。
除此之外，登录登出那些就不说了。
前端如何处理数据
因为要知道是谁请求的，所以session必须保持，如果Angular项目跟接口项目是同一个项目是没有问题的，但如果Angular项目跟接口项目不在同一项目时，Angular项目向接口发起请求时要带cookie，因为sessionId是放在cookie中的，如果不同域名还需要进行跨域处理。这些问题在这里先不说，最后告诉你。
请求到数据之后要找一个全局变量存放，每次请求完把请求回来的数据与变量里面的数据去重合并。
Angular1.x中实现
页面元素显隐控制
编写一个服务用于权限处理
import Service from 'framework/lib/Service';
class XsPermissionService extends Service {
constructor(features, app) {
super(features, app);
}
static init($rootScope) {
let _permissions;
//此处应该需要ajax同步请求第一级别权限标识符列表的，要同步请求不能异步请求，ajax请求略去返回后执行以下方法
_permissions = ["permission_1", "permission_2"];
return _permissions;
}
_permission($rootScope) {
//权限检查
let _permissionCheck = (permissions, permissionName) => {
return (permissions.indexOf(permissionName) > -1);
};
//数组去重
let _unique = (arr) => {
let res = [];
for (let i = 0, len = arr.length; i < len; i++) {
let obj = arr[i];
if (res.indexOf(obj) === -1) res.push(obj);
}
return res;
};
//请求权限接口
this.requestPermissions = (pKey) => {
//此处应该需要ajax同步请求下级权限标识符列表的，要同步请求不能异步请求，ajax请求略去返回后执行以下方法
this.pushPermission(["permission_3", "permission_4"]);
};
//更新权限并发起广播,广播在指令处接收
this.pushPermission = (permissions) => {
this.permissions = _unique(this.permissions.concat(permissions));
$rootScope.$broadcast('permissionsChanged');
};
//权限判断接口
this.hasPermission = (permissionStr) => {
permissionStr = permissionStr.trim();
if (permissionStr.indexOf("\|") > -1) {// 多权限 或
let permissions = permissionStr.split('\|');
let hasPermissionFlag = false;
for (let i = 0; i < permissions.length; i++) {
if (_permissionCheck(this.permissions, permissions[i].trim())) {
hasPermissionFlag = true;
break;
}
}
return hasPermissionFlag;
} else if (permissionStr.indexOf("\&") > -1) { //多权限 并
let permissions = permissionStr.split('\&');
let hasPermissionFlag = true;
for (let i = 0; i < permissions.length; i++) {
if (!_permissionCheck(this.permissions, permissions[i].trim())) {
hasPermissionFlag = false;
break;
}
}
return hasPermissionFlag;
} else {
return _permissionCheck(this.permissions, permissionStr);
}
}
}
//这里是注册service服务
execute() {
this._permission.$inject = ['$rootScope'];
this.service('xsPermission', this._permission);
}
}
export default XsPermissionService;
编写一个指令用于控制标签显隐
import Directive from 'framework/lib/Directive';
class XsPermissionDirective extends Directive {
constructor(app) {
super(app);
}
_xsPermission(xsPermission) {
'ngInject';
return {
restrict: 'A',
link: function ($scope, $element, $attrs) {
if (typeof $attrs.xsPermission !== 'string')
throw "the value of xs-permission must be a string!";
let permissionName = $attrs.xsPermission.trim();
let notPermission = (permissionName[0] === '!');
if (notPermission) {
permissionName = permissionName.slice(1).trim();
}
function setVisibility() {
let hasPermission = xsPermission.hasPermission(permissionName);
if (hasPermission && !notPermission || !hasPermission && notPermission) {
$element.show();
} else {
$element.remove();
}
}
setVisibility();
//接收广播，执行控制显隐方法
$scope.$on('permissionsChanged', setVisibility);
}
}
}
//注册指令
execute() {
this.directive('xsPermission', this._xsPermission);
}
}
export default XsPermissionDirective;
到此页面中控件显隐的权限控制已经完成，效果如下
注：拥有的权限分别为permission_1、permission_2、permission_3、permission_4
代码
运行效果
审查元素
由于没有permission_5这个权限，所以代码中对应permission_5的元素会被移除，所以无论是在页面还是在查看源代码页面都无法看到它的存在。
好了，大功告成！且慢！Example_2(被拦截)是什么鬼？还可以拦截？
必须的！
请开始你的表演！
路由拦截实现
路由配置
因为Angular原生的路由有点弱，所以一般情况下都会使用别的路由，其中ui-router就比较符合现实，所以一般都会用它，而它使用起来也是很方便的，但不知为什么generator-es6-angular用的是原生的路由（现在不知道还是不是，反正我看的时候是），这里我就不教你怎么用了，一般看看API文档就懂，不懂的话最后告诉你怎么弄。
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('start', {
url: '/start',
templateUrl: 'partials/start.html'
})
});
这个是ui-router的一个路由配置。重点在于state中的两个参数，第一个参数可看作是标识，第二个传入了一个对象，是这个路由的配置项，权限就需要在这里做些手脚。
export default[
{
id: 'admin.example',
state: {
url: '/example',
template: '<div ui-view class="fade-in-up"></div>'
}
},
{
id: 'admin.example.1',
state: {
url: '/1',
template: tpl_example1,
controller: Example1Controller,
controllerAs: '$this',
permission:"permission_1"//有这个权限，可以到达
}
},
{
id: 'admin.example.2',
state: {
url: '/2',
template: tpl_example2,
controller: Example2Controller,
controllerAs: '$this',
permission:'permission_5'//没有该权限，被拦截
}
}
]
这段是改进过的代码，看起来完全不一样，那是因为这里配了3个路由啦，我们看中间那个，多了个id，其实id就是上段内容里面的start，用于标识一个路由，state就是上段代码的配置项，多了的controllerAs可以不用管，这里用不到，permission字段是自己加上去的，接收的跟xs-permission指令一样，都是对应权限。写完这个就可以了吗？非也！还需要一个拦截器
这个拦截器跟Angular官方说的拦截器不一样，这点要区分一下，这个拦截器与JavaWeb里面的拦截器功能类似，是拦截请求的，说小一点就是拦截路由。
用原生的Angular应该是这样写(不太确定，我没这样写过，估计要把箭头函数改成普通的函数才行)
var m1 = angular.module('myApp',[]);
m1.run(['$rootScope', '$state','xsPermission',function($rootScope, $state, xsPermission){
$rootScope.$on('$stateChangeStart', (event, toState, toParams, fromState, fromParams) => {
let _permission = toState.permission;
//权限判断，如果没有权限跳转到别的页面
if (typeof _permission === 'string' && !xsPermission.hasPermission(_permission)) {
event.preventDefault();// 取消默认跳转行为
let from = fromState.name;
if (from === 'noPermission') {
from = '';
}
//这个是用Base64加密参数，可以不用管的
let params = Base64.encode(JSON.stringify(fromParams));
from = Base64.encode(from);
//noPermisson这个是一个路由的id，要配置到路由里面，否则跳转的时候回报错
$state.go("noPermission", {from: from, params: params});//跳转返回
}
}]);
下面的是我再框架里面写的
class PermissionRouteInterceptor extends Feature {
constructor() {
super('permissionRouteInterceptor');
}
_interceptor($rootScope, $state, xsPermission) {
'ngInject';
$rootScope.$on('$stateChangeStart', (event, toState, toParams, fromState, fromParams) => {
let _permission = toState.permission;
if (typeof _permission === 'string' && !xsPermission.hasPermission(_permission)) {
event.preventDefault();// 取消默认跳转行为
let from = fromState.name;
if (from === 'noPermission') {
from = '';
}
let params = Base64.encode(JSON.stringify(fromParams));
from = Base64.encode(from);
$state.go("noPermission", {from: from, params: params});//跳转返回
}
});
}
execute() {
this.run(this._interceptor);
}
}
export default PermissionRouteInterceptor;
内部逻辑是一样的，就写法不一样而已。
到此，路由拦截部分也完成了，实现效果应该是这样的
example_1页面
这个页面的权限要求是
permission_1，所以是可以展示出来的。然后我们看Example_2
时刻保持微笑
彩蛋
最后教你
- 如何实现带cookie跨域请求
- 如何将generator-es6-angular的路由改为ui-router
- 如何在不懂ui-router的情况下使用ui-router
- 如何用ES6优雅地编程
- 如何实现懒加载*
答案在这里：
GitHub项目地址：https://github.com/GustinLau/angular_framework
觉得好的话，点一下星星吖~
网友评论