关于 Angular 中的 AuthGuard

Posted 2023-05-16 JerryWangSAP

Angular 中的 AuthGuard 是一个路由守卫，它用于保护某些路由，只有当用户经过身份验证并具有访问权限时，才允许他们访问。AuthGuard 通常与路由配置一起使用，以确保用户无法直接访问需要身份验证的页面。

AuthGuard 是一个 Angular 服务，可以使用以下命令来创建它：

ng g guard auth

上面的命令将生成一个名为“auth”的 AuthGuard，并将其添加到 src/app/auth.guard.ts 文件中。auth.guard.ts 文件中的代码如下所示：

import  Injectable  from \'@angular/core\';
import  CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router  from \'@angular/router\';
import  Observable  from \'rxjs\';
import  AuthService  from \'./auth.service\';

@Injectable(
  providedIn: \'root\'
)
export class AuthGuard implements CanActivate 
  constructor(private authService: AuthService, private router: Router) 

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree 
    if (this.authService.isLoggedIn()) 
      return true;
     else 
      this.router.navigate([\'/login\']);
      return false;
    
  

在上面的代码中，AuthGuard 是通过实现 CanActivate 接口来定义的。CanActivate 接口包含一个名为 canActivate() 的方法，该方法决定了当用户尝试访问受保护的路由时应该执行哪些操作。

在 AuthGuard 中，我们注入了一个名为 AuthService 的服务和 Router 对象。AuthService 用于检查用户是否已经登录，而 Router 用于导航到登录页面或者用户试图访问的页面。在 canActivate() 方法中，我们首先调用 this.authService.isLoggedIn() 方法来检查用户是否已经登录。如果用户已经登录，我们返回 true，表示用户可以访问该路由。否则，我们调用 this.router.navigate([\'/login\']) 方法，将用户重定向到登录页面，然后返回 false，表示用户无法访问该路由。

要使用 AuthGuard 来保护一个路由，我们需要在路由配置中将 AuthGuard 添加到 canActivate 属性中。例如：

import  NgModule  from \'@angular/core\';
import  Routes, RouterModule  from \'@angular/router\';
import  HomeComponent  from \'./home/home.component\';
import  DashboardComponent  from \'./dashboard/dashboard.component\';
import  LoginComponent  from \'./login/login.component\';
import  AuthGuard  from \'./auth.guard\';

const routes: Routes = [
   path: \'\', component: HomeComponent ,
   path: \'dashboard\', component: DashboardComponent, canActivate: [AuthGuard] ,
   path: \'login\', component: LoginComponent ,
];

@NgModule(
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
)
export class AppRoutingModule  

在上面的代码中，我们将 AuthGuard 添加到了 /dashboard 路由的 canActivate 属性中，这意味着只有当用户已经登录时才能访问 /dashboard 路由。

Angular 如何从 authguard 中检索？

【中文标题】Angular 如何从 authguard 中检索？

【英文标题】：Angular how can I retrieve from authguard?

【发布时间】：2020-03-02 03:56:08

【问题描述】：

我有一个带有 jwt 身份验证的 Angular-springboot 程序，我想知道如何在 Angular 上登录后，恢复登录者的数据，例如用户名。我查看了一些关于 authguard 和 httpinterceptors 的指南，但我对 rigurado 有点困惑，你们中的任何人都可以给我发一个它检索数据的代码吗？我从指南中复制了一些服务，这些服务是 auth-guard、身份验证、basic-auth-http-interceptors 和 httpclient，我认为这些服务非常标准，但如果需要，我会发布它们

【问题讨论】：

您好，首先，您列出的某些服务并未真正用于检索/获取数据。例如： - Authguard：如果您指的是 RouteGuard，这些用于允许/阻止用户访问特定路由，这通常基于身份验证 (angular.io/guide/router#milestone-5-route-guards) - HttpInterceptors：这些用于执行任何针对您想要定位的任何 API 请求的附加逻辑 (angular.io/api/common/http/HttpInterceptor) 一旦经过身份验证的用户登录，您将如何处理他们的详细信息？ （比如他们的 id）

TYPO 警报 - 它是 警卫 - 不是“守卫” ....

【参考方案1】：

当用户登录系统时，将令牌类型和jwt令牌保存在本地存储中。在 TokenInterceptor 的帮助下，它会在每个请求中发送标头详细信息。

import  Injectable  from '@angular/core';
import 
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor, HttpResponse
 from '@angular/common/http';
import  Observable  from 'rxjs';
@Injectable()
export class TokenInterceptor implements HttpInterceptor 
  constructor()  
  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> 
    request = request.clone(
      setHeaders: 
        Authorization: `$localStorage.getItem('token_type') $localStorage.getItem('jwt_token')`
      
    );
    return next.handle(request);
  

在 app.module.ts 中添加提供者 provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true

【参考方案2】：

谢谢，是的，我有一个像这样的拦截器，它保存在本地存储中，但是如果我在另一个组件中，并且我想调用它，例如我按下一个按钮，并且在我想做的方法中，一个帖子，如果你按下这个按钮，你必须登录好吗？，你必须更新数据库，所以我需要知道谁按下了这个，如何找回这个？