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，因此如果您想要路由到组件，则必须在那里返回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是一个函数装饰器，它接受一个函数参数。此函数返回boolean或Promise。所以你可以使用它：

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

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

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

不要忘记通过组件构造函数

注入UserService

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

如何在角度2中使用@CanActivate

3 个答案: