Angular应用使用Auth0 Angular库loginWithRedirect登录成功后如何执行操作？

Auth0的loginWithRedirect方法完成授权后会跳转回你的Angular应用，你可以通过订阅SDK暴露的身份状态流来捕获登录成功事件，执行自定义逻辑后再跳转主页面，具体实现如下：

1. 前置配置 #

先确认Auth0后台已经配置了和你应用匹配的回调地址，且回调路由没有配置鉴权守卫，避免SDK处理授权结果时被拦截。

2. 全局状态监听（推荐） #

直接在应用根组件AppComponent中订阅AuthService的身份状态流，加去重逻辑避免重复触发操作：

import { Component, OnInit } from '@angular/core';
import { AuthService } from '@auth0/auth0-angular';
import { MatSnackBar } from '@angular/material/snack-bar';
import { Router } from '@angular/router';
import { filter, take, switchMap } from 'rxjs';
// 引入你自己的业务校验服务
import { UserValidateService } from './services/user-validate.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  constructor(
    private auth: AuthService,
    private snackBar: MatSnackBar,
    private router: Router,
    private validateService: UserValidateService
  ) {}

  ngOnInit(): void {
    // 仅监听首次登录成功的状态变化
    this.auth.isAuthenticated$.pipe(
      // 过滤出登录成功的状态
      filter(isAuthenticated => isAuthenticated),
      // 只取一次值，避免后续状态变更重复触发
      take(1),
      // 获取当前登录用户信息
      switchMap(() => this.auth.user$.pipe(take(1))),
      // 调用你自己的服务做业务校验，需要传token的话可以先调用auth.getAccessTokenSilently()获取
      switchMap(userInfo => this.validateService.checkUserLegal(userInfo.sub))
    ).subscribe({
      next: (validateRes) => {
        // 展示问候提示
        this.snackBar.open(`登录成功，欢迎${validateRes.userName}`, '知道了', {
          duration: 3000
        });
        // 跳转至应用主页面
        this.router.navigate(['/dashboard']);
      },
      error: () => {
        this.snackBar.open('账号校验失败，请重新登录', '关闭', {
          duration: 3000
        });
        // 校验失败直接退出登录
        this.auth.logout({ returnTo: window.location.origin });
      }
    })
  }
}

3. 回调路由单独处理（可选） #

如果你希望逻辑更聚合，可以单独配置一个回调路由，所有授权完成后的跳转都指向该路由，在回调组件中处理完所有自定义逻辑后再跳转主页面：

// app-routing.module.ts 新增路由配置
const routes: Routes = [
  { path: 'auth-callback', component: AuthCallbackComponent },
  // 其余路由配置
];

// auth-callback.component.ts 回调组件逻辑
@Component({
  selector: 'app-auth-callback',
  template: `<div class="loading">登录处理中，请稍候...</div>`
})
export class AuthCallbackComponent implements OnInit {
  // 构造函数依赖和上述AppComponent一致，业务逻辑也完全相同，处理完成后跳转主页面即可
}

注意事项 #

• 必须加take(1)或者distinctUntilChanged操作符，避免可观察对象多次推送值导致业务逻辑重复执行
• 如果调用业务校验接口需要携带鉴权令牌，可以通过AuthService的getAccessTokenSilently()方法获取有效令牌后再发起请求

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