Angular中AuthGuard异常：登录后刷新主页仍重定向至登录页

页面刷新时，AuthGuard的canActivate方法会优先执行，此时用户服务内的isLoggedIn变量还未从localStorage读取最新值（服务的ngOnInit钩子执行时机晚于守卫的判断逻辑），导致loggedIn()返回false，触发登录页重定向。后续服务的ngOnInit才会同步localStorage的状态，但此时守卫已经完成判断。

核心思路是确保每次登录状态判断都能获取到localStorage的最新值，以下两种方案任选其一：

方案一：直接在loggedIn()方法中读取localStorage #

修改用户服务的loggedIn()方法，跳过内存变量的依赖，直接从localStorage获取状态：

// 用户服务代码修改
loggedIn(): boolean {
    // 直接读取localStorage，保留原有isRegistered的判断逻辑
    return localStorage.getItem("loggedin") === "true" || this.isRegistered;
}

// 保留logIn方法用于更新状态
logIn() {
    this.isLoggedIn = true;
    localStorage.setItem("loggedin", "true");
}

// 移除服务中的ngOnInit钩子

方案二：在服务构造函数中初始化状态 #

将原本在ngOnInit中的逻辑移至构造函数，确保服务初始化时立刻同步localStorage状态：

// 用户服务代码修改
constructor() {
    // 构造函数中直接读取localStorage初始化状态
    this.isLoggedIn = localStorage.getItem("loggedin") === "true";
}

// 移除ngOnInit钩子
loggedIn():boolean {
    return this.isLoggedIn || this.isRegistered;
}

logIn() {
    this.isLoggedIn = true;
    localStorage.setItem("loggedin", "true");
}

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