角度2认证

Question

我将在angular 2中找到一些简单身份验证的示例。通过路由，authguard和验证。

当然，我在Google中使用搜索功能，但是我只能通过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 （ 请参阅docs ）在路由器配置中使用防护功能：

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

这只是用angular 2进行身份验证的简单示例。

Answer 2

我所拥有的是一种可以保存应用程序状态的服务。

我创建的进一步身份验证是使用用户名和密码登录。 服务器的响应返回令牌。 我存储令牌，userId是应用程序状态。 然后，我在需要有关用户信息的每个组件中都有此服务。

这种状态服务的一个例子。 https://github.com/AngularClass/angular2-webpack-starter/blob/master/src/app/app.service.ts

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

问候