在 Angular2 中加载 Appcomponent 之前的用户身份验证
Posted
技术标签:
【中文标题】在 Angular2 中加载 Appcomponent 之前的用户身份验证【英文标题】：User Authentication before Appcomponent is loaded in Angular2 【发布时间】：2016-09-14 13:50:59 【问题描述】：我有一个简单的应用程序，它通过 Appcomponent 加载材料设计 Ui。我需要在加载应用程序组件之前对用户进行身份验证。
app组件如下
import Component from 'angular2/core';
import Router, RouteConfig, ROUTER_DIRECTIVES,CanActivate from 'angular2/router';
import AuthHttp,AuthConfig, tokenNotExpired, AUTH_PROVIDERS from 'angular2-jwt';
import HomeComponent from '../home/HomeComponent'
import AboutComponent from '../about/AboutComponent'
import HeaderComponent from './HeaderComponent'
import LoginComponent from '../login/LoginComponent'
import AuthService from '../../services/AuthService'
import SidebarComponent from './SidebarComponent'
import DashboardComponent from './DashboardComponent'
import MDL from './MaterialDesignLiteUpgradeElement';
@RouteConfig([
path: 'app/home', component: HomeComponent, as: 'Home',
path: 'app/dashboard', component: DashboardComponent, as: 'Dashboard',
path: 'app/about', component: AboutComponent, as: 'About',
path: 'app/login', component: LoginComponent, as: 'Login',
path: 'app/*', redirectTo: ['Login'] // this redirect is not working for some reason
])
@Component(
selector: 'my-app',
/*template: '<router-outlet></router-outlet>',*/
template: `
<body>
<div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
<app-header mdl class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600"></app- header>
<app-sidebar class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
</app-sidebar>
<main class="mdl-layout__content mdl-color--grey-100">
<router-outlet></router-outlet>
</main>
</div>
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>
</body>
`,
/*styleUrls: ['../app/assets/styles.css'], */
directives: [ROUTER_DIRECTIVES,SidebarComponent,HeaderComponent,MDL],
providers: [AUTH_PROVIDERS,AuthService]
)
export class AppComponent
constructor()
我有一个登录组件，它按如下方式登录用户
import Component from 'angular2/core';
import Router, RouteConfig, ROUTER_DIRECTIVES from 'angular2/router';
import AuthHttp,AuthConfig, tokenNotExpired, AUTH_PROVIDERS from 'angular2-jwt';
import AuthService from '../../services/AuthService'
@Component(
selector: 'protected',
template: '',
directives: [ROUTER_DIRECTIVES],
providers: [AUTH_PROVIDERS,AuthService]
)
export class LoginComponent
constructor(private auth: AuthService)
this.auth.login();
login()
this.auth.login();
logout()
this.auth.logout();
static loggedIn()
return tokenNotExpired();
登录组件使用 AuthService
身份验证服务
import Injectable from 'angular2/core';
import ROUTER_DIRECTIVES, Router from "angular2/router";
declare var Auth0Lock: any;
@Injectable()
export class AuthService
constructor(private router: Router)
lock = new Auth0Lock('KEY','URL');
login()
this.lock.show((error: string, profile: Object, id_token: string) =>
if (error)
console.log(error);
return false;
localStorage.setItem('profile', JSON.stringify(profile));
localStorage.setItem('id_token', id_token);
this.router.navigate(['Home']);
);
logout()
localStorage.removeItem('profile');
localStorage.removeItem('id_token');
我尝试使用 @CanActivate 注释 AppComponent 如下 但这似乎不起作用，因为 AppComponent 以任何方式加载。
@CanActivate(() => LoginComponent.loggedIn())
export class AppComponent
任何想法如何防止 appComponent 在没有身份验证的情况下加载？
【问题讨论】：
【参考方案1】：您可以实现自己的RouterOutlet，它会覆盖acitvate 方法来检查是否允许此人导航到该路线。
import Directive, DynamicComponentLoader, ElementRef from "angular2/core";
import AuthService from '../../services/AuthService'
import Router, RouterOutlet, ComponentInstruction from "angular2/router";
@Directive(
selector: 'auth-router-outlet'
)
export class AuthRouterOutlet extends RouterOutlet
private _protectedRoutes =
'app/home': true,
'app/dashboard': true,
'app/about': true
;
constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader, private _router: Router, nameAttr: string, private _authService: AuthService)
super(_elementRef, _loader, _router, nameAttr);
activate(nextInstruction: ComponentInstruction): Promise<any>
if (this._protectedRoutes[nextInstruction.urlPath])
if (!this._authService.loggedIn())
this._router.navigate(['Login']);
return super.activate(nextInstruction);
在您的AppComponent 中，只需将<router-outlet></router-outlet> 替换为<auth-router-outlet></auth-router-outlet>。
对于RouteConfig 中的重定向，请使用两个星号，如下所示：
@RouteConfig([
path: 'app/home', component: HomeComponent, as: 'Home',
path: 'app/dashboard', component: DashboardComponent, as: 'Dashboard',
path: 'app/about', component: AboutComponent, as: 'About',
path: 'app/login', component: LoginComponent, as: 'Login',
path: 'app/**', redirectTo: ['Login'] // two asterisks here
])
【讨论】：
“ComponentInstruction”类型上不存在属性“routeName”。此外，我在 loggedIn() 方法中有什么？令牌？ 您使用的是哪个版本的 Angular？ 版本为2.0.0-beta.17loggedIn() 返回令牌的状态，我猜？我使用的是完全相同的版本，并且自定义路由器插座没有任何问题。你的导入正确吗？
谢谢。似乎可以正常工作，但我的基本网址仍未受到保护。我添加了这个导出类 AuthRouterOutlet extends RouterOutlet private _protectedRoutes = 'app/': true, 'app/home': true, 'app/dashboard': true, 'app/about': true ;以上是关于在 Angular2 中加载 Appcomponent 之前的用户身份验证的主要内容，如果未能解决你的问题，请参考以下文章
styleUrls 未在 angular2 ChildComponent (RC5) 中加载
如何使用 systemjs 在最小的 Angular 2 应用程序中加载 RxJS？