NGXS状态管理实战：基于JWT的身份认证实现-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00965/article/details/148575775

NGXS状态管理实战：基于JWT的身份认证实现

store 🚀 NGXS - State Management for Angular 项目地址: https://gitcode.com/gh_mirrors/sto/store

前言

在现代前端应用中，身份认证是一个基础且关键的功能模块。本文将深入探讨如何使用NGXS状态管理库来实现基于JWT（JSON Web Token）的身份认证系统。NGXS作为Angular的响应式状态管理解决方案，能够帮助我们优雅地管理应用中的认证状态。

核心概念设计

1. 状态模型设计

首先我们需要定义认证模块的状态结构：

export interface AuthStateModel {
  token: string | null;  // JWT令牌
  username: string | null; // 当前登录用户名
}

这种设计简洁明了，包含了认证系统最核心的两个要素：

token：存储服务器返回的JWT令牌
username：记录当前登录用户信息

2. 动作(Action)定义

NGXS采用CQRS模式，我们需要明确定义认证相关的操作：

export class Login {
  static readonly type = '[Auth] Login'; // 唯一动作标识
  constructor(public payload: { username: string; password: string }) {}
}

export class Logout {
  static readonly type = '[Auth] Logout';
}

动作定义遵循NGXS的最佳实践：

使用方括号注明动作所属领域
登录动作携带凭证信息
登出动作无需额外参数

状态实现细节

1. 状态类实现

@State<AuthStateModel>({
  name: 'auth',  // 状态名称
  defaults: {    // 默认状态
    token: null,
    username: null
  }
})
@Injectable()
export class AuthState {
  // 选择器：获取当前令牌
  @Selector()
  static getToken(state: AuthStateModel): string | null {
    return state.token;
  }

  // 选择器：判断是否已认证
  @Selector()
  static getIsAuthenticated(state: AuthStateModel): boolean {
    return !!state.token;
  }

  constructor(private authService: AuthService) {}

  // 处理登录动作
  @Action(Login)
  login(ctx: StateContext<AuthStateModel>, action: Login) {
    return this.authService.login(action.payload).pipe(
      tap((result: { token: string }) => {
        ctx.patchState({
          token: result.token,
          username: action.payload.username
        });
      })
    );
  }

  // 处理登出动作
  @Action(Logout)
  logout(ctx: StateContext<AuthStateModel>) {
    const state = ctx.getState();
    return this.authService.logout(state.token).pipe(
      tap(() => {
        ctx.setState({
          token: null,
          username: null
        });
      })
    );
  }
}

关键点解析：

选择器(Selector)：提供状态查询接口，避免直接访问状态
动作处理器(Action Handler)：处理业务逻辑并更新状态
状态更新：使用patchState进行部分更新，setState进行完整替换
副作用处理：通过RxJS管道管理异步操作

2. 状态持久化配置

JWT通常需要持久化存储，NGXS提供了存储插件：

export const appConfig: ApplicationConfig = {
  providers: [
    provideStore(
      [AuthState],
      withNgxsStoragePlugin({
        keys: ['auth.token']  // 只持久化token字段
      })
    )
  ]
};

这种配置实现了：

自动将token保存到localStorage
应用启动时自动恢复token
避免敏感信息（如密码）的持久化

认证守卫实现

保护需要认证的路由是认证系统的关键功能：

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private store: Store) {}

  canActivate() {
    const isAuthenticated = this.store.selectSnapshot(AuthState.getIsAuthenticated);
    return isAuthenticated;
  }
}

路由配置示例：

export const routes: Routes = [
  {
    path: 'admin',
    loadComponent: () => import('./admin').then(m => m.AdminComponent),
    canActivate: [AuthGuard]  // 应用认证守卫
  }
];

守卫特点：

使用selectSnapshot同步获取认证状态
返回布尔值决定路由是否可激活
可轻松扩展到需要角色权限的场景

登出后的路由处理

完善的认证系统需要处理用户登出后的跳转：

@Component({
  selector: 'app',
  template: '..'
})
export class AppComponent implements OnInit {
  constructor(
    private actions$: Actions,  // NGXS动作流
    private router: Router
  ) {}

  ngOnInit() {
    this.actions$.pipe(ofActionDispatched(Logout)).subscribe(() => {
      this.router.navigate(['/login']);  // 登出后跳转登录页
    });
  }
}

这种响应式处理方式的优势：