我还没有准备好进入 Angular 2,但我想处理他们的新路由器和组件。
作为背景,我在 Google App Engine 上使用了一个 Python 实例,该实例将 Endpoints 与 Angular 结合使用。
如何使用 AngularJS 1.5 的组件路由器在有和没有经过身份验证的用户的情况下提供 html?我想尽可能以最“有角度的方式”来实现这一点。当前的文档在我身上丢失了。
我还没有准备好进入 Angular 2,但我想处理他们的新路由器和组件。
作为背景,我在 Google App Engine 上使用了一个 Python 实例,该实例将 Endpoints 与 Angular 结合使用。
如何使用 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 属性。我不确定这是否是最好的解决方案,但它有效:)