个人中心
gpt4 book ai didi

angularjs - Angular2 中加载 AppComponent 之前的用户身份验证

转载 作者：太空宇宙 更新时间：2023-11-03 23:31:44 24 4
gpt4 key购买 nike

我有一个简单的应用程序，它通过 Appcomponent 加载 Material 设计 Ui。我需要在加载应用程序组件之前对用户进行身份验证。

应用组件如下

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 在未经身份验证的情况下加载吗？

最佳答案

您可以实现自己的 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
])

关于angularjs - Angular2 中加载 AppComponent 之前的用户身份验证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37293461/

24 4 0
文章推荐： c - Arduino 红外 Remote 与其他阻挡功能
文章推荐： c# - 如何使用 Mock.Of() 模拟没有默认构造函数的类？
文章推荐： c - c中的信号量初始化
文章推荐： javascript - 值(value)串联问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com