javascript - Angular 2执行登录身份验证(我进入无限循环。)

标签 javascript angular typescript angular2-routing

我正在尝试创建一个网站后端,我需要在 Angular 2 中进行用户身份验证。但我无法解决一些问题,这就是我正在做的事情。

这是我的路由文件。

const appRoutes: Routes = [
 {
   path: 'admin',
   component: AdminloginComponent,
   canActivate: [LoggedInGuard]
 },
 {
   path: '',
   component: HomepageComponent
 },
 {
   path: '**',
   component: OurservicesComponent
 },
];

这是我的 gaurd 文件://成功登录后,我在本地存储中设置 is_logged_in。

import { Injectable } from '@angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable()
export class LoggedInGuard implements CanActivate {
 constructor(private router: Router) { }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
  if(localStorage.getItem("is_logged_in"))
  {
      this.router.navigate(['/admin/dashboard']);
      return true;
  }
  return false;
}

}

** 我的问题是,当 url 为/admin canActivate 时,如果我获得本地存储,我将导航到 admin/dashboard。

但是如果用户注销了,那么在/admin 上,他们应该是登录表单,但是如果我导航到/admin 如果没有登录,那么它会进入 canActivate ,并且它们在本地存储中什么也没有,所以它会转到 admin等等。那么解决这个问题的正确方法是什么。

提前致谢。

最佳答案

不清楚您到底想要完成什么,但使用 router.navigate 进行重定向应该使用 return false;,而不是 return true; >

要么

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if(localStorage.getItem("is_logged_in")) {
      return true;
    }
    this.router.navigate(['/admin/dashboard']);
    return false;
  }

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if(localStorage.getItem("is_logged_in")) {
      this.router.navigate(['/admin/dashboard']);
      return false;
    }
    return true;
  }

关于javascript - Angular 2执行登录身份验证(我进入无限循环。),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43602318/

相关文章:

typescript - 通过返回类型的调用签名联合缩小函数类型

javascript - 共享接口(interface)公共(public)功能的有效方法

javascript - 如何保护可能从浏览器源代码中窃取的 angular js 应用程序代码?

javascript - 为什么modal弹出按空格键会按?我该如何预防?

javascript - 使用 importmaps 时如何在 Rails 7 中自定义 Trix 工具栏?

angular - 如何检测 Angular 中的路由变化?

Angular 客户端需要 Web API 的访问 token

javascript - 如何像在 Python 中那样在 Google Apps 脚本中对字符串进行切片?

javascript - 如何使用json_to_sheet提取xlxs中的json数据

扩展 String 的 TypeScript 新类