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;
        }
    }
}

如果用户登录，则guard会调用loginService并获取信息。如果用户未登录，则警卫会告知路由器导航到login - 页面。

您需要使用canActivate（see 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

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

此致

角度认证2

2 个答案: