Angular 5登录状态页面访问异常及路由重定向问题求助

看起来你在Angular的AuthGuard和登录状态管理上遇到了两个小问题，我来帮你逐个解决～

问题1：已登录用户仍可随意访问登录页面 #

你写的isLog()逻辑本身是对的，但大概率是没有在正确的时机触发执行，而且只在组件里判断不够严谨。可以从这两方面优化：

1. 确保组件初始化时就执行状态判断
   在login.component.ts的ngOnInit钩子中调用isLog()，同时建议订阅登录状态的变化（避免用户在其他标签页登录后，当前登录页还能访问的情况）：

   ngOnInit(): void {
     // 初始化时检查状态
     this.isLog();
     // 订阅登录状态的实时变化
     this.user.loginStatus$.subscribe(isLoggedIn => {
       if (isLoggedIn) {
         this.router.navigate(['/products']);
       }
     });
   }
   
   isLog() { 
     if (this.user.getUserLoggedIn() === true) { 
       this.router.navigate(['/products']); 
     } 
     // 这里不需要else跳/login，因为已经在登录页了
   }
   

2. 用路由守卫做更严谨的访问控制
   给登录页单独加一个守卫，直接在路由层面拦截已登录用户的访问：

   // 新建 AuthGuardForLogin.ts
   import { Injectable } from '@angular/core';
   import { CanActivate, Router, UrlTree } from '@angular/router';
   import { User } from './user.service';
   
   @Injectable({ providedIn: 'root' })
   export class AuthGuardForLogin implements CanActivate {
     constructor(private user: User, private router: Router) {}
   
     canActivate(): boolean | UrlTree {
       if (this.user.getUserLoggedIn()) {
         // 已登录则跳转到产品页
         return this.router.createUrlTree(['/products']);
       }
       // 未登录允许访问登录页
       return true;
     }
   }
   

   然后在路由配置中引用这个守卫：

   const routes: Routes = [
     { path: 'login', component: LoginComponent, canActivate: [AuthGuardForLogin] },
     { path: 'products', component: ProductsComponent, canActivate: [AuthGuard] },
     // 其他路由配置...
   ];
   

问题1.1：后退/前进/刷新时自动“登出” #

这个问题的核心是登录状态只存在内存中，页面刷新或路由跳转后，服务重新初始化，状态就丢失了。需要把状态持久化到本地存储：

1. 修改User服务，同步状态到localStorage
   用BehaviorSubject来管理状态，并把状态同步到localStorage，确保刷新后能恢复：

   import { Injectable } from '@angular/core';
   import { BehaviorSubject } from 'rxjs';
   
   @Injectable({ providedIn: 'root' })
   export class User {
     // 从localStorage读取初始状态，默认未登录
     private loginStatus$ = new BehaviorSubject<boolean>(
       localStorage.getItem('isLoggedIn') === 'true'
     );
   
     // 对外暴露可订阅的状态
     public loginStatus = this.loginStatus$.asObservable();
   
     getUserLoggedIn(): boolean {
       return this.loginStatus$.value;
     }
   
     setUserLoggedIn(status: boolean): void {
       this.loginStatus$.next(status);
       // 同步到localStorage
       localStorage.setItem('isLoggedIn', status.toString());
     }
   
     // 登出时记得清除状态和可能的token
     logout(): void {
       this.setUserLoggedIn(false);
       localStorage.removeItem('authToken'); // 如果有token的话
     }
   }
   

2. 确保登录/登出时调用正确的方法
   登录成功后调用this.user.setUserLoggedIn(true)，登出时调用this.user.logout()，这样状态会自动同步到本地存储，刷新或跳转后不会丢失。

3. 更新你的AuthGuard逻辑
   确保AuthGuard基于持久化后的状态判断，而不是临时变量：

   @Injectable({ providedIn: 'root' })
   export class AuthGuard implements CanActivate {
     constructor(private user: User, private router: Router) {}
   
     canActivate(): boolean | UrlTree {
       const isLoggedIn = this.user.getUserLoggedIn();
       if (!isLoggedIn) {
         return this.router.createUrlTree(['/login']);
       }
       return true;
     }
   }
   

这样调整后，两个问题应该都能解决啦～

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