Angular路由问题：已登录用户仍可访问登录页面

我开发了一个包含3个组件的Angular应用，分别为sellerlogin、Sellerhome、Home。登录成功后会将token存入localStorage并跳转到Sellerhome页面，预期逻辑是：当localStorage中无token时，用户会被重定向至登录页；但目前存在问题：即使localStorage中存在token，用户仍可直接访问登录页面。

相关代码 #

登录组件的login方法 #

login() {
    const foremail = (this.email = this.loginForm.get('email')?.value);
    const formpassword = (this.password =
      this.loginForm.get('password')?.value);
    this.sellerservice.sellerlogin(foremail, formpassword).subscribe((res) => {
      if (res[0].email == foremail && res[0].password == formpassword) {
        localStorage.setItem('token', res[0].email);
        this.router.navigate(['/sellerhome']);
        
      } else {
        alert('Invalid credentials');
      }
    });
  }

认证守卫代码 #

const token = localStorage.getItem('token');

const router = inject(Router);
console.log(token);
if (!token) {
    console.log('false');
    router.navigate(['/sellerlogin']);
    return false;
} else {
    return true;
}

路由配置 #

{path:'sellerhome',component:SellerhomeComponent,pathMatch:'full',canActivate:[authguardsGuard]},
{path:'sellerlogin',component:SellerloginComponent,pathMatch:'full'}

服务中的sellerlogin方法（临时使用GET而非POST） #

sellerlogin(email:string,password:string):Observable<any>{
    return this.http.get(`${this.url}?email=${email}&password=${password}`);
}

问题原因与修复方案 #

核心问题 #

当前的认证守卫仅作用于sellerhome页面，用来拦截未登录用户的访问，但没有对sellerlogin页面做反向限制——当用户已登录（localStorage存在token）时，没有阻止其进入登录页。

修复步骤 #

1. 修改认证守卫逻辑，增加已登录状态的判断：如果存在token，就重定向到卖家首页并拒绝访问登录页；如果没有token则允许访问登录页。
   修改后的守卫代码：

const token = localStorage.getItem('token');
const router = inject(Router);

if (!token) {
    // 未登录，允许进入登录页
    return true;
} else {
    // 已登录，强制跳转到卖家首页，阻止访问登录页
    router.navigate(['/sellerhome']);
    return false;
}

2. 给登录页路由添加守卫，在路由配置中为sellerlogin路由加上canActivate属性：

{path:'sellerlogin',component:SellerloginComponent,pathMatch:'full',canActivate:[authguardsGuard]},
{path:'sellerhome',component:SellerhomeComponent,pathMatch:'full',canActivate:[authguardsGuard]}

额外优化建议 #

• 目前用用户邮箱作为token存在安全风险，建议后端返回标准JWT令牌，前端存储JWT而非明文邮箱。
• 登录接口使用GET请求会将密码暴露在URL中，建议尽快改为POST请求，将账号密码放在请求体中传输。
• 守卫中可添加token合法性校验（比如JWT的过期时间、签名验证），避免伪造token绕过权限控制。

内容的提问来源于stack exchange，提问作者Muhammad Zulqarnain Malik