laravel - 如何使用 Laravel Passport 在 Angular 2 中创建身份验证？

Question

我在找到为我的 Angular 2 应用程序进行身份验证的方法时遇到了问题。我在 laravel 中有 API，并尝试使用 laravel 护照(通过密码授予)。我在 Postman 上对其进行了测试，现在我需要将其与 Angular 连接。我已经开始寻找一些图书馆来做这件事，但我只找到这个 https://github.com/manfredsteyer/angular-oauth2-oidc

你对如何连接它有什么想法吗？我无法应对。

Answer 1

你可以这样做服务，不要忘记分配客户端id和密码。

userservice.ts

import {Injectable} from '@angular/core';
import {Observable} from 'rxjs/Rx';
import {Http, Headers, Response} from '@angular/http';
import {User} from './user';


@Injectable()
export class UserService {

    constructor(private http: Http) {
    }

    private oauthUrl = "http://server.techalin.com/oauth/token";
    private usersUrl = "http://server.techalin.com/api/users";

    getAccessToken() {
        var headers = new Headers({
            "Content-Type": "application/json",
            "Accept": "application/json"
        });

        let postData = {
            grant_type: "password",
            client_id: 2,
            client_secret: "RGNmOzt7WQ8SdNiCcJKKDoYrsFqI2tudopFjOJU3",
            username: "albanafmeti@gmail.com",
            password: "password",
            scope: ""
        }

        return this.http.post(this.oauthUrl, JSON.stringify(postData), {
            headers: headers
        })
            .map((res: Response) => res.json())
            .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
    }

    getUsers(accessToken: string): Observable<User[]> {

        var headers = new Headers({
            "Accept": "application/json",
            "Authorization": "Bearer " + accessToken,
        });

        return this.http.get(this.usersUrl, {
            headers: headers
        })
            .map((res: Response) => res.json())
            .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
    }
}

并像这样将此服务用于其他组件

  import 'UserService' from './user.service';
  export class ExampleCompoent{
  constructor(private userService: UserService) {
        this.userService.getAccessToken()
            .subscribe(data => {
                this.getUsers(data.access_token)
            });
    }

    getUsers(accessToken: string) {
        this.userService.getUsers(accessToken)
            .subscribe(
                users => {
                    this.users = users;
                    console.log(users);
                });
    }
    }

阅读更多相关信息 link