angularjs - 如何将 AngularJS 1.5 的组件路由器与用户身份验证结合使用？

Question

我还没有准备好进入 Angular 2，但我想解决他们的新路由器和组件。

作为背景，我在 Google App Engine 上使用 Python 实例，该实例将端点与 Angular 结合使用。

如何使用 AngularJS 1.5 的组件路由器在有或没有经过身份验证的用户的情况下提供 html 服务？我想以尽可能最“Angular 的方式”来完成此任务。我丢失了当前的文档。

Answer 1

最近我也遇到了同样的问题。我是这样解决的:

在组件定义对象中添加 $canActivate 属性:

import { MainController } from './main.controller';

export class MainComponent {

    constructor() { 
        this.controller = MainController;
        this.templateUrl = 'app/main/main.html';
        this.$canActivate = (Auth) => {
            'ngInject';

            return Auth.redirectUnauthenticated();
        };
    }
}

创建身份验证服务，其中包含所有身份验证信息:

export class AuthService {

    constructor($auth, UserApi, $q, $rootRouter, Storage) {
        'ngInject';

        this.$auth = $auth;
        this.$q = $q;
        this.$rootRouter = $rootRouter;
        this.storage = Storage;
        this.userApi = UserApi.resource;
    }

    /**
     * Check user's status
     */
    isAuthenticated() {
        return this.$auth.isAuthenticated();
    }

    /**
     * Redirect user to login page if he is not authenticated
     */
    redirectUnauthenticated() {
        if (!this.$auth.isAuthenticated()) {
            this.$rootRouter.navigate(['Login']);

            return false;
        }

        return true;
    }
}

注意:$auth 服务来自 satellizer图书馆。

基本上，在每个组件(您可以导航到)中，您只需要经过身份验证的访问，请放置相同的 $canActivate 属性。我不确定这是否是最好的解决方案，但它确实有效:)