角度驗證2

Question

我會找到角度2中簡單驗證的一些示例。通過路由，authguard和驗證。

當然，我在谷歌使用搜索，但我發現只有auth0和jwt認證。

Answer 1

您應該創建一個知道，如果用戶登錄或不服務：

import { Injectable } from '@angular/core'; 
import { Router } from '@angular/router'; 

@Injectable() 
export class LoginService { 
    private loggedIn: boolean; 

    constructor(private router: Router) { 
     this.loggedIn = false; 
    } 

    login() { 
     // mechanism to login 
     this.loggedIn = true; 
    } 

    logout() { 
     // mechanism to logout 
     this.loggedIn = false; 
    } 

    isLoggedIn() { 
     return this.loggedIn; 
    } 
} 

如果你想保護你的路由器的一些組件，你應該建立一個這樣的AuthGuard：

import { Injectable } from '@angular/core'; 
import { Router, CanActivate } from '@angular/router'; 
import { LoginService } from './login.service'; 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private loginService: LoginService, private router: Router) { } 

    canActivate() { 
     if (this.loginService.isLoggedIn() !== true) { 
      this.router.navigate(['/login']); 
      return false; 
     } else { 
      return true; 
     } 
    } 
} 

如果用戶登錄或不登錄，警衛調用loginService並獲取信息。如果用戶沒有登錄，警衛會通知路由器導航到login頁面。

您需要使用canActivate（see docs）使用保護在你的路由器CONFIGS：

{ 
    path: 'app', 
    canActivate: [AuthGuard], 
    component: ProtectedComponent, 
} 

這僅僅是驗證一個簡單的例子有角2

Answer 2

我有什麼是一種服務，持有的應用程序的狀態。

我創建的進一步身份驗證是與用戶，密碼登錄。來自服務器的響應返回一個令牌。我存儲令牌，userId是應用程序狀態。然後，我在每個使用我需要關於用戶信息的組件中都有這項服務。

這種狀態服務的一個例子。 https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/app/app.service.ts

我使用這個令牌來驗證用戶對服務器的進一步請求。

問候