角度验证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

我使用这个令牌来验证用户对服务器的进一步请求。

问候