Angular2：使用AuthGuard路由重定向-Java 学习之路

我有一个Angular2应用程序，如果用户没有登录，应该阻止到某个页面的路由 . 这是我的app.routes文件

export const routes: Routes = [
  { path: '', component: LoginComponent },
  { path: 'login', component: LoginComponent },
  { path: 'home', component: HomeComponent, canActivate: [AuthGuard] },
  { path: '**', component: LoginComponent },
];

和我的AuthGuard文件

@Injectable()
export class AuthGuard implements CanActivate {
response: ResponseInterface;

constructor(private router: Router, private localStorage: LocalStorageService,
 private services: MyService) { }
canActivate() {

let token = String(this.localStorage.get('token'));
if (token != null) {
  this.services.keepAlive(token).subscribe(
    response => this.response = response,
    error => alert(error),
    () => {
      if (this.response.status == 'OK') {
        console.log("response OK");
        return true;
      } else {
        console.log("response KO");
        this.router.navigate(['/login']);
        return false;
      }
    }
  )

} else {
  this.router.navigate(['/login']);
  return false;
}

现在，如果我尝试导航到http://localhost:4200/#/home路径并且我已经将一个令牌存储到localStorage中，则不会发生任何事情：主页未显示且导航栏上的路径变为http://localhost:4200/#/ . 怎么了？

1 回答

canActive 方法应该返回 Observable<boolean> ，_1526239_或 boolean .

您正在订阅 this.services.keepAlive Observable，并将 boolean 值返回到订阅回调，而不是将其返回到 canActivate 方法 . 更改您的代码如下：

canActivate(): Observable<boolean> | Promise<boolean> | boolean {
    let token = String(this.localStorage.get('token'));
    if (token != null) {
        return this.services.keepAlive(token)
            .map(response => {
                if (response.status == 'OK') {
                    console.log("response OK");
                    return true;
                } else {
                    console.log("response KO");
                    this.router.navigate(['login']);
                    return false;
                }
            });
    } else {
        this.router.navigate(['login']);
        return false;
    }
}

这样，布尔类型的Observable（ Observable<boolean> ）将返回到 canActive 方法，并且路由解析应该按预期工作 .

回复于 2024-04-27T11:40:07+08:00

Angular2：使用AuthGuard路由重定向

1 回答

相关问题