将单个token解析为angular中的多个服务

在Angular中，Token通常用于身份验证和授权。将单个Token解析为多个服务涉及到的基础概念包括JWT（JSON Web Tokens）、Angular的服务（Services）以及依赖注入（Dependency Injection）。

基础概念

JWT：是一种开放标准（RFC 7519），用于在网络应用环境间安全地将信息作为JSON对象传输。JWT由三部分组成：头部（Header）、载荷（Payload）和签名（Signature）。
Angular服务：服务是一个类，它封装了应用中的特定功能，并且可以被多个组件共享。
依赖注入：Angular的依赖注入系统允许我们以一种可测试和可维护的方式创建和使用服务。

类型

认证服务：处理Token的获取、存储和刷新。
授权服务：根据Token中的信息决定用户是否有权限访问特定资源。
用户信息服务：提供用户相关的信息，如用户名、角色等。

应用场景

假设我们有一个应用，用户登录后会获得一个JWT Token。我们希望根据这个Token来提供不同的服务：

用户登录：获取Token并存储。
访问控制：检查Token的有效性，并根据Token中的信息决定用户是否可以访问某些页面或功能。
用户信息获取：从Token中提取用户信息，并提供给需要的组件。

遇到的问题及解决方法

问题：如何将Token解析为多个服务？

解决方法：

创建一个认证服务（AuthService），负责处理Token的存储、获取和验证。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private tokenKey = 'auth_token';

  getToken(): string | null {
    return localStorage.getItem(this.tokenKey);
  }

  setToken(token: string): void {
    localStorage.setItem(this.tokenKey, token);
  }

  removeToken(): void {
    localStorage.removeItem(this.tokenKey);
  }

  // 其他Token相关的操作...
}

创建一个授权服务（AuthService），负责根据Token中的信息决定用户是否有权限访问某些资源。

import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root'
})
export class AuthorizationService {
  constructor(private authService: AuthService) {}

  hasPermission(permission: string): boolean {
    const token = this.authService.getToken();
    if (token) {
      // 解析Token并检查权限
      const payload = this.parseToken(token);
      return payload.permissions.includes(permission);
    }
    return false;
  }

  private parseToken(token: string): any {
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
  }
}

在组件中使用这些服务：

import { Component } from '@angular/core';
import { AuthService } from './auth.service';
import { AuthorizationService } from './authorization.service';

@Component({
  selector: 'app-root',
  template: `
    <div *ngIf="authService.isLoggedIn()">
      <h1>Welcome, {{ userInfo?.name }}!</h1>
      <button *ngIf="authorizationService.hasPermission('admin')">Admin Panel</button>
    </div>
    <button *ngIf="!authService.isLoggedIn()" (click)="login()">Login</button>
  `
})
export class AppComponent {
  userInfo: any;

  constructor(private authService: AuthService, private authorizationService: AuthorizationService) {
    this.userInfo = this.authService.getUserInfo();
  }

  login(): void {
    // 模拟登录过程
    const token = 'your-jwt-token';
    this.authService.setToken(token);
    this.userInfo = this.authService.getUserInfo();
  }
}