我使用最新的AuthGuard方法,如果用户未登录但未能登录,它应该使用router.createUrlTree进行重定向

问题描述 投票:0回答:1

我无法重定向到/用户请帮忙

这是 AuthGuard,我在其中订阅了发出布尔值的 authService.authSubStatus

import { inject, Injectable } from '@angular/core';
import { map, Observable } from 'rxjs';
import {
  ActivatedRouteSnapshot,
  CanActivateChildFn,
  CanActivateFn,
  Router,
  RouterStateSnapshot,
  UrlTree,
} from '@angular/router';
import { AuthDataService } from './authDataService';

@Injectable({ providedIn: 'root' })
export class AuthGuard {
  static authGuardFn: CanActivateFn = (
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> => {
    const router = inject(Router);
    const authService = inject(AuthDataService);

    return authService.authSubStatus.pipe(
      map((status) => {
        if (status) return true;
        return router.createUrlTree(['/user']);
      })
    );
  };
}

这里是 AuthDataService,其中只有 authSubStatus 被用作 AuthGuard 中订阅的观察者


import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { User } from '../Model/userModel';
import { Subject, tap } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class AuthDataService {
  authenticated = false;

  authSubStatus = new Subject<boolean>();

  constructor(private http: HttpClient) {}

  testService() {
    console.log(this);
  }

  //LOG-IN posting basic auth to the backend

  postBasicAuthData(username: string, password: string) {
    console.log(username, password);

    const header = new HttpHeaders();

    const authHeader = header.set(
      'Authorization',
      'Basic ' + window.btoa(username + ':' + password)
    );

    return this.http
      .get<any>('http://localhost:8080/login/LoginUser', {
        headers: authHeader,
        observe: 'response',
        withCredentials: true,
      })
      .pipe(
        tap((responseData) => {
          if (responseData) {
            this.authenticated = true;
            this.authSubStatus.next(this.authenticated);
          }
        })
      );
  }

  //SIGN-UP sign up a new user

  newUserDetailsPost(
    username: string,
    password: string,
    age: number,
    email: string
  ) {
    console.log(username, password, age, email);

    return this.http.post<any>('http://localhost:8080/Sign-up/signup-user', {
      name: username,
      password: password,
      age: age,
      email: email,
    });
  }
}

这里是app.routes

import { Routes } from '@angular/router';
import { LoginSignupComponent } from './login-signup/login-signup.component';
import { SuccessComponent } from './success/success.component';
import { AuthGuard } from './Service/authGuardService';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'user',
    pathMatch: 'full',
  },
  {
    path: 'user',
    component: LoginSignupComponent,
    //login signup routs in lazy mode
    loadChildren: () =>
      import('./login-signup/login-logout.routes').then(
        (mode) => mode.LOGIN_LOGOUT_ROUTS
      ),
  },
  {
    path: 'welcome',
    component: SuccessComponent,
    canActivate: [AuthGuard.authGuardFn],
  },
];

在我的 AuthGuard 服务中,我尝试返回一个重定向到 /users 的 createUrlTree

    return authService.authSubStatus.pipe(
      map((status) => {
        if (status) return true;
        return router.createUrlTree(['/user']);
      })
    );

但是当用户未登录时,它无法重定向到“/user”,但是当用户登录时,它可以正常工作,并且警卫会像平常一样显示欢迎页面

angular rxjs angular-ui-router
1个回答
0
投票

我想说问题可能来自于你的 authSubStatus ,它是一个主题,一个主题没有默认值,并且你的守卫可能会无限期地等待它给出一个值,但它永远不会这样做。

您可以尝试将其替换为具有默认值的 BehaviourSucbject。

authSubStatus = new BehaviorSubject<boolean>(false);

我已经尝试过,似乎可以工作,但可能还有其他错误。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.