Angular登录认证后路由跳转问题求助（.NET后端）

你的代码逻辑存在核心问题：authService.login()是异步HTTP请求，subscribe内的回调会在请求成功后才执行，但你把跳转判断写在了subscribe外部——这时候localStorage.setItem还没执行，所以那个if条件永远不会触发。

正确的做法是把路由导航放在subscribe的回调内部，也就是成功获取并存储token之后执行：

export class LoginComponent {

  title = 'webUI.UI';
  user = new User();

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

  login(user: User) {
    this.authService.login(user).subscribe((token: string) => {
      localStorage.setItem('authToken', token);
      // 登录成功后跳转到home页面
      this.router.navigate(['/home']);
    }, (error) => {
      // 可在此处理登录失败场景，比如提示用户账号密码错误
      console.error('登录失败', error);
    });
  }
}

另外你的路由配置有语法错误，最后一个路由对象后多了个多余的大括号，修正后如下：

const routes: Routes = [
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'signup',
    component: SignupComponent
  },
  {
    path: 'home',
    component: EmployeepListComponent
  }
];

额外建议：为了避免未登录用户直接访问home页面，你应该添加CanActivate路由守卫，在守卫逻辑里检查localStorage中是否存在authToken，不存在则强制跳转到登录页。

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