基于Angluar ui-router的权限管理

最新推荐文章于 2025-03-07 19:05:34 发布

felonyxce

最新推荐文章于 2025-03-07 19:05:34 发布

阅读量850

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB

本文链接：https://blog.youkuaiyun.com/felonyxce/article/details/58594611

WEB 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用Angular结合ui-router实现前端权限控制。针对登录后页面刷新及权限验证混乱等问题，提出了利用preventDefault防止刷新和在stateChangeSuccess中进行权限判断的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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