我无法重定向到/用户请帮忙
这是 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”,但是当用户登录时,它可以正常工作,并且警卫会像平常一样显示欢迎页面
我想说问题可能来自于你的 authSubStatus ,它是一个主题,一个主题没有默认值,并且你的守卫可能会无限期地等待它给出一个值,但它永远不会这样做。
您可以尝试将其替换为具有默认值的 BehaviourSucbject。
authSubStatus = new BehaviorSubject<boolean>(false);
我已经尝试过,似乎可以工作,但可能还有其他错误。