角2UI-路由器认证

Question

我正试图在我的Range4项目中实现JWT身份验证。服务器端都设置好了，只有前端需要额外的工作。

我找到了这个auth0/angular2-jwt库。但我担心的是，我在我的项目中使用ui路由器，而库似乎是为ngRoute设计的(不确定)。这个UI-路由器/ngRoute有关系吗？我能在我的项目中使用这个库吗？

或者，还有其他的身份验证库是为带有UI-路由器的角2/4设计的吗？

Answer 1

这适用于您使用的任何路由首选项。您经常会发现自己使用的是'tokenNotExpired‘，当然是将令牌添加到本地存储和解码。

我在生产中使用过这六个项目，它可以是您想要的复杂的(或者是最小的，这就是我通常使用它的方式)。angular2-jwt是一个库，可以很好地处理角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()这样的东西，如果用户登录，则返回布尔值，还可以使用authService.getUserName()将用户名作为字符串返回。