如何动态设置UI-router的abstract属性以限制路由未授权访问？

嘿，我来帮你实现这个需求，顺便给你捋捋这里面的门道！

首先，你想用abstract属性限制未授权访问的思路是可行的，但我们可以优化实现方式，让它更灵活易维护：

1. 给需要权限的路由打标记 #

在定义路由时，给需要保护的路由加一个自定义属性（比如requiresAuth: true），这样后续能快速识别哪些路由需要处理：

angular.module('yourApp', ['ui.router'])
  .config(function($stateProvider) {
    $stateProvider
      .state('project', {
        abstract: false, // 先默认设为false，后续动态修改
        url: '/users',
        templateUrl: 'views/configuration/index.html',
        requiresAuth: true // 标记该路由需要授权
      })
      .state('dashboard', {
        url: '/dashboard',
        templateUrl: 'views/dashboard.html',
        requiresAuth: true // 另一个需要保护的路由
      })
      .state('login', {
        url: '/login',
        templateUrl: 'views/login.html'
        // 无需保护，不加标记
      });
  });

2. 应用启动后动态修改abstract属性 #

Angular的run块会在应用加载完成后执行，这里我们注入$state获取所有已注册路由，结合你的授权服务（比如AuthService）动态设置abstract：

.run(function($state, AuthService, $rootScope) {
  // 判断当前用户是否已授权
  const isUserAuthenticated = AuthService.isLoggedIn();

  // 遍历所有路由，处理需要保护的项
  angular.forEach($state.get(), function(state) {
    if (state.requiresAuth) {
      // 未授权时设为true阻止访问；已授权则设为false开放访问
      state.abstract = !isUserAuthenticated;
    }
  });

  // 额外保障：拦截路由跳转，防止用户直接输入URL绕过限制
  $rootScope.$on('$stateChangeStart', function(event, toState) {
    if (toState.requiresAuth && !AuthService.isLoggedIn()) {
      event.preventDefault(); // 阻止当前跳转
      $state.go('login'); // 跳转至登录页
    }
  });
});

3. 登录成功后更新路由状态 #

用户登录成功后，记得把之前设为abstract: true的路由改回来，不然登录后还是无法访问：

// 示例登录控制器
.controller('LoginController', function($state, AuthService) {
  this.login = function() {
    AuthService.login(/* 登录参数 */)
      .then(function() {
        // 登录成功后遍历路由，更新abstract属性
        angular.forEach($state.get(), function(state) {
          if (state.requiresAuth) {
            state.abstract = false;
          }
        });
        // 跳转至目标页面或首页
        $state.go('project');
      });
  };
});

• 为什么用自定义属性requiresAuth？ 这样不用硬编码路由名称，后续新增需要保护的路由时，只需添加这个标记即可，扩展性更强。
• 只设置abstract够吗？ 不够！用户如果直接在地址栏输入路由URL，可能还是会触发跳转，配合$stateChangeStart事件拦截才是更可靠的做法。
• 有没有更符合ui-router设计的方案？ 其实abstract路由的本意是作为父路由承载子路由，官方更推荐用resolve属性做权限校验，示例如下：

.state('project', {
  url: '/users',
  templateUrl: 'views/configuration/index.html',
  resolve: {
    // 进入路由前先校验授权
    authCheck: function(AuthService, $state, $q) {
      if (!AuthService.isLoggedIn()) {
        $state.go('login');
        return $q.reject('未授权'); // 阻止路由加载
      }
      return true;
    }
  }
});

这种方式会在路由激活前执行校验，失败则跳转至登录页，逻辑更清晰，也更贴合ui-router的设计理念。

内容的提问来源于stack exchange，提问作者Steve