angular - 如何使用angular2-jwt在angular 5中实现CanActivate？

Question

我正在尝试实现 canActivate 类来控制对 url 的访问。为了加载 token ，我使用了这些函数:

saveToken(jwt:string){
    this.jwtToken = jwt;
    localStorage.setItem('token',jwt);
    let jwtHelper = new JwtHelper();
    this.roles = jwtHelper.decodeToken(this.jwtToken).roles;
}

loadToken(){
    this.jwtToken = localStorage.getItem('token');
}

在每个函数中，我都添加了标题:

updateUser(appuser: AppUser) {
    return this.http.put('http://localhost:8080/users/' + appuser.id , appuser,{headers: new HttpHeaders({'Authorization':this.jwtToken})});
}

现在我想控制访问。有谁知道如何实现？不使用网址？

Answer 1

所以为了实现canActivate，你需要做一个AuthGuard。

什么是 AuthGuard:它确保用户是否通过身份验证以访问特定 URL。

在这里，我创建了一个示例代码，以便您了解实现守卫的想法。

我创建了一个服务。在其中，有一种方法 isAuthenticated 检查 token ，如果 token 可用则返回 true，否则返回 false。

我在 guard 内部使用了那个服务方法。

在路由中，我设置了我的守卫来处理是否激活该路由。

auth.service.ts

import { Injectable } from '@angular/core';
import { JwtHelper } from '@auth0/angular-jwt';

@Injectable()
export class AuthService {

  constructor(public jwtHelper: JwtHelper) {}

  // ...
  public isAuthenticated(): boolean {

    const token = localStorage.getItem('token');

    // Check whether the token is expired and return
    // true or false
    return !!token; (will return either true or false based on the token availability)
  }

}

auth-guard.service.ts

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuardService implements CanActivate {

  constructor(public auth: AuthService, public router: Router) {}

  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }

}

app.routes.ts

import { Routes, CanActivate } from '@angular/router';
import { ProfileComponent } from './profile/profile.component';
import { AuthGuardService as AuthGuard } from './auth/auth-guard.service';

export const ROUTES: Routes = [
  { path: '', component: HomeComponent },
  { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '' }
];

For more:

https://codecraft.tv/courses/angular/routing/router-guards/

https://ryanchenkie.com/angular-authentication-using-route-guards