基于Angluar ui-router的权限管理

来源：互联网发布：linux 终端快捷键编辑：程序博客网时间：2024/06/06 10:44

在前后端分离的系统中，前端肯定也需要对权限进行控制，查看用户是否具有操作的权限。

angular基于ui-router实现系统权限控制

这篇文章说明了如何利用ui-router解决系统控制的问题。但是这篇文章没有解决登录后刷新的问题，而且有时候权限会跳转的很混乱。解决办法是，在路由控制监听stateChangestart的时候，利用preventDefault的方式，就能解决刷新的问题了。同时，将权限的判断放在stateChangeSuccess中进行。具体代码如下：

  1 $rootScope.$on('$stateChangeStart', function (event, toState, toParams, fromState, fromParams) {  2         //必须登录  3         if (!authService.isLogin && toState.name.indexOf('auth') != 0) {  4             event.preventDefault();  5             authService.createSession().then(function (data) {  6                 $state.go(toState);  7             }, function (err) {  8   9                 $state.go('auth.login'); 10                 // $location.path($rootScope.localUrls.login); 11             }); 12         } 13     });

在此，authService是用来控制登录和权限的。如果用户没有登录，将调用authService.createSession函数。 authService.createSession的目的是通过读取cookie或者从服务器获取session进行认证，判断用户是否在登录期间。如果是允许登录则用户跳转到刷新的url下，否则系统跳转到登录界面。

  1     $rootScope.$on('$stateChangeSuccess', function (event, to, toParams, froms, fromParams) {  2         var permission = to.permission;  3         if (permission !== undefined) {  4             var per = authService.hasPermission(permission)  5             if (!per) {  6                  $state.go('auth.unAuthorized');  7             }  8         }  9     });

authService.hasPermission用来查看用户是否具有权限，如果没有则跳转到未授权的页面。

0 0