我想重定向未登录的用户,当他们尝试访问受保护的路由但重定向不起作用时,因为检查用户是否已登录的函数返回可观察量。
这是我在PrivateGuard中的代码:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AmplifyService } from 'aws-amplify-angular';
@Injectable({
providedIn: 'root'
})
export class PrivateGuard implements CanActivate {
constructor (private _router: Router,
private _amplifyService: AmplifyService) {}
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this._amplifyService.authStateChange$.pipe(map(authState => {
console.log(authState);
if (authState.state === 'signedIn') {
return true;
}else{
this._router.navigate(['/login']); // Why Never redirect?
return false;
}
})
);
}
}
app.routes.ts:
import { RouterModule, Routes } from '@angular/router';
import { LoginComponent } from './components/public/login/login.component';
import { HomeComponent } from './components/private/home/home.component';
const APP_ROUTES: Routes = [
{ path: 'login', component: LoginComponent},
{ path: 'home', component: HomeComponent, canActivate: [PrivateGuard] },
{ path: '**', pathMatch: 'full', redirectTo: 'home' }
];
export const APP_ROUTING = RouterModule.forRoot(APP_ROUTES);
如果我在登录时编写 console.log in else 语句,则此控制台.log将显示在控制台中,但永远不会重定向到 homeComponent
当我尝试导航到专用路由时控制台
url 中的路由消失了,而不是本地主机:4200/登录
感谢您的任何回复。
解决
最后,我使用承诺而不是可观察的。代码如下:
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { AmplifyService } from 'aws-amplify-angular';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root'
})
export class PrivateGuard implements CanActivate {
constructor (private _router: Router,
private _amplifyService: AmplifyService) {}
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
return this._amplifyService.auth().currentAuthenticatedUser()
.then(() => {
return true;
})
.catch(() => {
this._router.navigate(['/login']);
return false;
});
}
}
谢谢大家的回答
你的可观察量可能永远不会完成,它仍然等待 authStateChange$ 发出更多值。
您可以使用 take 运算符实现您想要的(该运算符将在发出一个值后取消订阅:
return this._amplifyService.authStateChange$.pipe(
take(1), // completes the observable on first emited value
map(authState => /* */)
);