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

我还没准备好进入Angular 2,但我想解决他们的新路由器和组件问题.

对于后台,我在Google App Engine上使用了一个将端点与Angular结合使用的Python实例.

如何使用AngularJS 1.5的组件路由器在有和没有经过身份验证的用户的情况下为html提供服务？我希望尽可能以最“角度的方式”实现这一目标.目前的文档丢失了.

解决方法

最近我在同样的事情上挣扎.我这样解决了：

在组件定义对象中添加$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属性.我不确定这是否是最好的解决方案,但它有效:)

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

解决方法

猜你在找的Angularjs相关文章