基于Angluar ui-router的权限管理

最新推荐文章于 2025-08-04 16:42:43 发布

weixin_34235135

最新推荐文章于 2025-08-04 16:42:43 发布

阅读量196

点赞数

CC 4.0 BY-SA版权

文章标签： ui 前端 ViewUI

原文链接：https://my.oschina.net/felony/blog/847700

为什么80%的码农都做不了架构师？>>>

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

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     });