Angular 8使用angular-auth-oidc-client Cookie存储时遇[WDS] Disconnected!问题

我来帮你分析下这个问题，你的自定义Cookie存储实现和配置里有几个潜在的问题，很可能是导致WDS断开、应用停摆的原因：

1. 未实现OidcSecurityStorage的完整接口 #

OidcSecurityStorage接口要求实现三个核心方法：read、write和remove，你当前的代码里缺失了remove方法。当认证流程需要清理存储数据（比如登出操作、token过期刷新）时，框架会调用remove方法，未实现该方法会直接抛出未捕获错误，中断整个应用流程，进而触发WDS断开。

2. JSON.parse未做异常捕获 #

当Cookie中的值不是有效的JSON格式时（比如Cookie被意外篡改、存储时序列化出错），read方法里的JSON.parse会直接抛出异常，这也是导致WDS断开的常见诱因——未捕获的JS异常会打断webpack dev server的连接。

3. Cookie配置参数缺失 #

你调用cookieService.set时只传了键和值，没有设置路径和过期时间：

• 路径默认是当前路由，这会导致在其他路由下无法读取Cookie，直接中断认证流程；
• 未设置过期时间的话，Cookie是会话级的，一旦页面刷新或会话结束就会失效，如果和OIDC token的生命周期不匹配，也会引发认证异常。

4. 注入令牌OidcConfig的注册缺失 #

你在CookiesStorageService中使用了@Inject('OidcConfig')，但没有在AppModule的providers数组中注册这个令牌，这会导致服务初始化时出现注入错误，直接导致应用启动失败。

修正后的代码示例 #

1. 完善的CookiesStorageService实现

import { Injectable, Inject } from '@angular/core';
import { OidcSecurityStorage } from 'angular-auth-oidc-client';
import { CookieService } from 'ngx-cookie-service';
import { OidcConfiguration } from '../config/oidc.config';

@Injectable({ providedIn: 'root' })
export class CookiesStorageService implements OidcSecurityStorage {
  constructor(
    private cookieService: CookieService,
    @Inject('OidcConfig') private oidcConfig: OidcConfiguration
  ) { }

  public read(key: string): any {
    const fullKey = `${key}_${this.oidcConfig.openIdConfiguration.client_id}`;
    const val = this.cookieService.get(fullKey);
    if (!val || val === '') return null;

    // 增加JSON解析的异常捕获，避免解析失败中断应用
    try {
      return JSON.parse(val);
    } catch (e) {
      console.error(`解析Cookie ${fullKey} 失败:`, e);
      this.remove(key); // 解析失败时主动清理无效Cookie
      return null;
    }
  }

  public write(key: string, value: any): void {
    if (!value || value === '') {
      this.remove(key);
      return;
    }

    const fullKey = `${key}_${this.oidcConfig.openIdConfiguration.client_id}`;
    const serializedValue = JSON.stringify(value);
    // 设置Cookie路径为根目录确保全应用可访问，同时配置过期时间（可根据token有效期调整）
    this.cookieService.set(
      fullKey,
      serializedValue,
      1, // 过期天数
      '/', // 根路径
      undefined, // 域名（根据部署环境配置）
      false, // 是否仅HTTPS（生产环境建议设为true）
      'Lax' // SameSite策略，符合现代浏览器安全要求
    );
  }

  // 新增remove方法，实现完整的OidcSecurityStorage接口
  public remove(key: string): void {
    const fullKey = `${key}_${this.oidcConfig.openIdConfiguration.client_id}`;
    this.cookieService.delete(fullKey, '/'); // 要和写入时的路径保持一致
  }
}

2. 修正AppModule的配置

确保注册OidcConfig注入令牌，并正确配置AuthModule：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AuthModule } from 'angular-auth-oidc-client';
import { CookiesStorageService } from './path-to-your-service/cookies-storage.service';
import { oidcConfig } from './config/oidc.config'; // 导入你的OIDC配置对象

@NgModule({
  declarations: [...],
  imports: [
    CommonModule,
    AuthModule.forRoot({ 
      storage: CookiesStorageService,
      // 补充OIDC配置，确保框架能正确读取客户端信息
      config: oidcConfig.openIdConfiguration
    }),
    ...
  ],
  providers: [
    // 注册OidcConfig注入令牌，确保服务能正常获取配置
    { provide: 'OidcConfig', useValue: oidcConfig }
  ]
})
export class AppModule { }

额外排查建议 #

• 打开浏览器控制台的「错误」面板，查看除了[WDS] Disconnected!之外的具体错误信息，这能帮你定位更精准的问题；
• 测试前先清空现有Cookie，避免之前的无效Cookie干扰新的认证流程；
• 如果应用部署在HTTPS环境，建议将Cookie的secure参数设为true，提升安全性。

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