在Aurelia CLI项目中使用Azure ADAL遇到的问题求助

刚碰到过类似的场景，给你分享几个排查和解决的思路：

问题1：首次访问Reports页面登录后应用重加载两次 #

这种情况大多是ADAL的回调逻辑和Aurelia的应用初始化流程冲突导致的，常见原因和解决方法：

• 检查redirectUri配置：确保ADAL的redirectUri和Aurelia应用的基路径完全一致（比如window.location.origin + '/'），如果redirectUri指向了某个子路由，回调后可能会触发额外的路由跳转，导致页面重载。
• 延迟处理ADAL回调：在Aurelia的初始化代码（main.js）里，先判断当前是否是ADAL的回调请求（URL里包含id_token或access_token），处理完回调后再启动应用，避免重复初始化：

  export function configure(aurelia) {
    const adalConfig = {
      clientId: '你的客户端ID',
      redirectUri: window.location.origin + '/',
      // 其他ADAL配置
    };
    const authContext = new AuthenticationContext(adalConfig);
  
    // 先处理回调
    if (window.location.hash.includes('id_token')) {
      authContext.handleWindowCallback();
      // 清理URL中的哈希参数，避免重复触发
      window.location.hash = '';
    }
  
    // 正常启动应用
    aurelia.use
      .standardConfiguration()
      .developmentLogging();
  
    aurelia.start().then(() => aurelia.setRoot('app'));
  }
  

• 避免路由守卫重复触发登录：如果Reports页面的路由守卫里直接调用了ADAL的登录方法，确保只在未登录状态下触发，避免回调回来后再次触发登录流程。

问题2：Home页登录后URL带/token_id=XXXX且路由错误 #

这个问题是因为ADAL默认把token参数放在了路径里，而Aurelia的路由无法匹配这个路径导致的，解决方法如下：

• 修改ADAL的responseMode为fragment：让token参数放在URL的哈希部分（#后面），不会干扰Aurelia的路由路径：

  const adalConfig = {
    clientId: '你的客户端ID',
    redirectUri: window.location.origin + '/',
    responseMode: 'fragment', // 关键配置，把参数放在哈希里
    // 其他ADAL配置
  };
  

• 添加回调专用路由：如果不想修改responseMode，可以在Aurelia的路由配置里添加一个通配路由来捕获带token的路径，处理完后跳转到正确页面：

  // app.js的路由配置
  configureRouter(config, router) {
    config.map([
      { route: '', name: 'home', moduleId: 'home', nav: true },
      { route: 'reports', name: 'reports', moduleId: 'reports', nav: true },
      // 捕获所有带token_id的路径
      { route: 'token_id=*', name: 'adal-callback', moduleId: 'adal-callback' }
    ]);
    this.router = router;
  }
  

  然后在adal-callback.js里处理回调并跳转：

  import { inject } from 'aurelia-framework';
  import { Router } from 'aurelia-router';
  import { AuthenticationContext } from 'adal-angular';
  
  @inject(Router)
  export class AdalCallback {
    constructor(router) {
      this.router = router;
      const adalConfig = { /* 你的ADAL配置 */ };
      const authContext = new AuthenticationContext(adalConfig);
      authContext.handleWindowCallback();
    }
  
    activate() {
      // 跳转到首页或者之前的页面
      this.router.navigate('home');
    }
  }
  

• 清理URL参数：处理完ADAL回调后，手动清理URL里的token参数，避免路由匹配失败。比如用window.history.replaceState来修改URL，移除多余的参数。

另外，如果你用了Aurelia的pushState路由模式，确保ADAL的redirectUri配置正确，并且服务器端配置了 fallback到index.html，避免回调时出现404错误。

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