如何在Angular 2中使用@CanActivate

Question

我有一個UserService並有一個配置文件組件，我在Userservice有功能，我想檢查用戶是否登錄，路由可以處於活動狀態，如下所示：

@CanActivate((userService: UserService) => userService.checkLogin())

如何使用CanActivate這樣？

Answer 1

您可以檢查用戶是否登錄，

@Component({selector: ... })
@CanActivate(()=>console.log('Should the component Activate?'))
class AppComponent {

}

並通過CanActivate

Answer 2

@CanActivate()在創建Component之前被調用，因此，如果要路由到組件， @CanActivate()需要在其中返回true或false。

import {appInjector} from './app-injector';
// ...
@CanActivate((next, prev) => {
    let injector = appInjector();
    let userService: UserService = injector.get(UserService);

    // if the checkLogin() method returns a boolean, you can just return it
    return userService.checkLogin();
}

您將需要一個app-injector.ts來阻止當前的注入器啟動：

let appInjectorRef;

export const appInjector:any = (injector = false) => {
    if (!injector) {
        return appInjectorRef;
    }

    appInjectorRef = injector;

    return appInjectorRef;
};

在您的bootstrap調用中，只需存儲注射器：

import {appInjector} from './app-injector';
// ...
bootstrap(App, [
    [...],
    UserService
]).then((appRef) => appInjector(appRef.injector));

Answer 3

@CanActivate是一個函數裝飾器，采用一個參數即函數。 此函數返回布爾值或Promise。 因此，您可以像這樣使用它：

@CanActivate ((next, prev) => {
    return this.userService.checkLogin();
})

如果您的checkLogin（）方法返回Promise，例如，

return new Promise((resolve, reject) => {
    // some code...
    resolve(true);
});

不要忘記通過組件構造函數注入Us​​erService

export class MyComponent {
  constructor(private userService : UserService) { }
}