基于Angluar ui-router的权限管理

原创
2017/02/28 14:15
阅读数 346

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

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 收藏
分享
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部