Angular 2 UI路由器身份验证

我正在尝试在angular 4项目中实现JWT身份验证。服务器端已经准备好了，只有前端需要一些额外的工作

我找到了这个图书馆。但我担心的是，我在项目中使用ui路由器，而库似乎是为ngRoute设计的（不确定）。这个UI路由器/ngRoute问题重要吗？我可以在我的项目中使用这个库吗

---

或者是否有任何其他针对Angular 2/4和UI Router设计的身份验证库？

这适用于您使用的任何路由首选项。您经常会发现自己使用的一般项是“tokenNotExpired”，当然还有将令牌添加到本地存储并对其进行解码

我已经在生产中的六个项目中使用了它，它可以是您想要的复杂程度（或者是最小程度，这是我通常使用它的方式）

angular2 jwt

是一个非常适合Angular4+项目中jwt处理的库，一直以来都得到很好的维护

认证服务

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

}

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

}

从'@angular/core'导入{Injectable}；
从'@angular/Router'导入{Router}；
从“/user.service”导入{UserService}；
从'angular2 jwt'导入{tokenNotExpired，JwtHelper}；
从“rxjs/Observable”导入{Observable}；
从'rxjs/Rx'导入{BehaviorSubject}；
@可注射（）
导出类身份验证服务{
jwtHelper:jwtHelper=newjwthelper（）；
_authChange:BehaviorSubject=新的BehaviorSubject（false）；
authChange=this.\u authChange.asObservable（）；
构造函数（私有用户服务：用户服务，
专用路由器：路由器{}
登录（电子邮件和密码）{
返回此.userService.login（emailAndPassword）
.地图(
res=>{
setItem（'token'，res.token）；
this._authChange.next（！this._authChange.getValue（））；
返回这个.loggedIn；
}
);
}
注销（）{
localStorage.removietem（'token'）；
this._authChange.next（！this._authChange.getValue（））；
this.router.navigate（['/']）；
}
getUserName（）{
if（this.loggedIn（））{
返回此.jwtHelper.decodeToken（localStorage.getItem（'token'））.user.username；
}否则{
返回“”；
}
}
getId（）{
if（this.loggedIn（））{
返回此.jwtHelper.decodeToken（localStorage.getItem（'token'））.user.\u id；
}否则{
返回“”；
}
}
loggedIn（）{
返回tokenNotExpired（）；
}
isAuthChange（）：可观察{
返回此.authChange；
}
}

用户服务

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

}

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

}

从'@angular/core'导入{Injectable}；
从'@angular/common/http'导入{HttpClient，HttpHeaders}；
导入'rxjs/add/operator/timeout'；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/catch”；
@可注射（）
导出类用户服务{
//标题
headers=新的HttpHeaders（）
.set（'Content-Type'，'application/json'）
.set（'charset'，'UTF-8'）；
构造函数（私有http:HttpClient）{}
寄存器（用户）：可观察{
log（'试图将用户文档插入tempuser集合'）；
console.log（用户）；
返回this.http.post（'/api/tempuser'，JSON.stringify（user），{headers:this.headers}）；
}
登录（凭证）：可观察{
返回this.http.post（'/api/login'，JSON.stringify（凭证），{headers:this.headers}）；
}
}

---

我在root

app.module

中提供这两个服务，并在其他组件中导入

AuthService

，以访问

AuthService.isLoggedIn（）

等内容，如果用户登录，则返回布尔值，以及

AuthService.getUserName（）

以字符串形式返回用户名。

非常感谢。我要去angular2 jwt图书馆。我只是想知道你是否有一个如何实现它的例子？@Viv我基本上是以他们拥有auth.service和user.service的最基本的例子为例。我将继续并在答案中添加我如何处理这些项目。