Angular2: 使用AuthGuard进行路由重定向

Question

我有一个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/#/。出了什么问题？

- giozh

---

你在日志中看到“响应正常”了吗？ - eko

是的，响应正常。 - giozh

不好意思，我的意思是你的代码中有一个 console.log("response OK");。你在控制台日志中看到它了吗？ - eko

我收到了响应OK和“响应OK”显示在日志中，因此代码的那部分被执行。 - giozh

Answer 1

canActive 方法应该返回 Observable<boolean>、Promise<boolean> 或者 boolean。

您正在订阅 this.services.keepAlive Observable，并将 boolean 值返回给 subscribe 回调函数，而不是返回给 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 方法，路由解析应该按预期工作。

- seidme

---

它正在订阅可观察对象并将布尔值返回到订阅回调函数，而不是返回到canActive方法中。 - seidme

我在 canActivate() 签名中遇到了以下错误：“没有最佳公共类型存在于返回表达式中。” - giozh

将canActive方法的返回类型定义如下：canActivate(): Observable<boolean> | Promise<boolean> | boolean { ... }。我也会更新答案。 - seidme