Aurelia Router：子路由授权的优质实现模式问询

我明白你现在的困扰——在根路由器里加授权步骤来管控/account下的子路由，确实会显得逻辑耦合，而且很难精准区分哪些子路由需要授权（比如signin/signout显然不需要）。针对你的路由结构，我推荐把授权逻辑直接绑定到账户子路由器本身，这样既模块化又能精准控制权限。

步骤1：给子路由添加授权标记 #

首先在账户子路由的配置里，给需要授权的路由（比如/account首页）加上auth: true的标记，不需要授权的signin/signout则不加：

// 定义account子路由的配置
export const accountRoutes = [
  { route: '', name: 'account-dashboard', moduleId: './dashboard', auth: true },
  { route: 'signin', name: 'account-signin', moduleId: './signin' },
  { route: 'signout', name: 'account-signout', moduleId: './signout' }
];

步骤2：在子路由器中添加授权步骤 #

把授权逻辑从根路由器移到账户子路由器的配置中，这样只有访问/account下的路由时才会触发检查，不会干扰根路由的其他路径：

import { RouterConfiguration, NavigationInstruction, Next, Router } from 'aurelia-router';
import { AuthService } from '../services/auth-service'; // 假设你有登录状态管理的服务

export class Account {
  router: Router;

  constructor(private authService: AuthService) {}

  configureRouter(config: RouterConfiguration, router: Router) {
    // 给子路由器添加专属的授权步骤
    config.addAuthorizeStep({
      async run(instruction: NavigationInstruction, next: Next) {
        // 检查当前导航的路由中是否有需要授权的配置
        const requiresAuth = instruction.getAllInstructions().some(inst => inst.config.auth);

        if (requiresAuth) {
          // 检查用户是否已登录
          const isAuthenticated = await this.authService.isLoggedIn();
          
          if (!isAuthenticated) {
            // 未登录则跳转到signin，同时记录当前路径，登录后可跳转回来
            return next.redirect('account/signin', { redirect: instruction.fragment });
          }
        }

        // 不需要授权或已授权，继续导航
        return next();
      }
    });

    config.map(accountRoutes);
    this.router = router;
  }
}

步骤3：处理登录后的跳转逻辑 #

在signin组件中，登录成功后跳回用户原本想要访问的页面（如果有的话）：

import { Router } from 'aurelia-router';
import { AuthService } from '../services/auth-service';

export class Signin {
  constructor(private router: Router, private authService: AuthService) {}

  async handleLogin(username: string, password: string) {
    // 执行登录逻辑
    const loginSuccess = await this.authService.login(username, password);
    
    if (loginSuccess) {
      // 获取跳转前的目标路径，默认跳转到account首页
      const redirectPath = this.router.currentInstruction?.queryParams.redirect || 'account';
      this.router.navigate(redirectPath);
    }
  }
}

这种方案的优势 #

• 模块化：授权逻辑和子路由强绑定，根路由器无需关心子路由的权限规则，代码更清晰
• 精准控制：只有标记了auth: true的子路由才会触发授权检查，signin/signout不受影响
• 可扩展性：后续如果给/account新增需要授权的子页面，只需在路由配置中添加auth: true即可

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