Question

我试图在我的angular 4项目中实现JWT身份验证。服务器端全部设置，只有前端需要一些额外的工作。

我找到了这个auth0/angular2-jwt库。但我担心的是我在我的项目中使用ui-router，而库似乎是为ngRoute设计的（不确定）。这个UI-Router / ngRoute的事情是否重要？我可以在我的项目中使用这个库吗？

或者是否有为UI-Router设计的Angular 2/4的其他身份验证库？

Answer 1

这适用于您使用的任何路由首选项。您将始终使用的常规项目是'tokenNotExpired'，当然还有将令牌添加到本地存储并对其进行解码。

我已经在生产中的六个项目中使用了它，它可以像你想要的那样复杂（或者是最小的，这通常是我如何使用它）。 angular2-jwt是一个非常适合在Angular 4+项目中处理JWT的库，因为它一直得到很好的维护。

<强> auth.service

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { UserService } from './user.service';
import { tokenNotExpired, JwtHelper } from 'angular2-jwt';
import { Observable } from 'rxjs/Observable';
import { BehaviorSubject } from 'rxjs/Rx';

@Injectable()
export class AuthService {
  jwtHelper: JwtHelper = new JwtHelper();
  _authChange: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
  authChange = this._authChange.asObservable();

  constructor(private userService: UserService,
              private router: Router) { }

  login(emailAndPassword) {
    return this.userService.login(emailAndPassword)
    .map(
      res => {
        localStorage.setItem('token', res.token);
        this._authChange.next(!this._authChange.getValue());
        return this.loggedIn;
      }
    );
  }

  logout() {
    localStorage.removeItem('token');
    this._authChange.next(!this._authChange.getValue());
    this.router.navigate(['/']);
  }

  getUserName() {
    if ( this.loggedIn() ) {
      return this.jwtHelper.decodeToken(localStorage.getItem('token')).user.username;
    } else {
      return '';
    }
  }

  getId() {
    if ( this.loggedIn() ) {
      return this.jwtHelper.decodeToken(localStorage.getItem('token')).user._id;
    } else {
      return '';
    }
  }

  loggedIn() {
    return tokenNotExpired();
  }

  isAuthChange(): Observable<boolean> {
    return this.authChange;
  }

}

<强> user.service

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import 'rxjs/add/operator/timeout';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';


@Injectable()
export class UserService {

  // Headers
  headers = new HttpHeaders()
              .set('Content-Type', 'application/json')
              .set('charset', 'UTF-8' );

  constructor(private http: HttpClient) { }

  register(user): Observable<any> {
    console.log('Attempting to insert user doc into tempuser collection');
    console.log (user);
    return this.http.post('/api/tempuser', JSON.stringify(user), { headers: this.headers }).timeout(1500);
  }

  login(credentials): Observable<any> {
    return this.http.post('/api/login', JSON.stringify(credentials), { headers: this.headers });
  }

}

我在根app.module中提供这两种服务，并在其他组件中导入AuthService以访问authService.isLoggedIn()之类的内容，以便在用户登录时返回布尔值{{ 1}}将用户名作为字符串返回。

Angular 2 UI路由器身份验证

1 个答案: