前后端分离开发时如何在Angular2中获取后端返回的token

一、基础meta标签提取逻辑 #

不管是开发还是生产环境，提取指定meta标签的核心逻辑都可以用原生DOM API实现，代码如下：

const sessidMeta = document.querySelector('meta[name="sessid"]');
const token = sessidMeta ? sessidMeta.getAttribute('content') : '';

二、开发环境适配（ng serve场景） #

由于ng serve启动时默认加载项目本地的src/index.html，不会使用后端返回的带token的HTML，需要单独适配，推荐两种方案：

• 方案1：硬编码测试token（适合快速自测）
  直接在项目根目录下的src/index.html中加入目标meta标签，填入测试环境可用的token值即可，启动后上述提取逻辑可直接读到对应值：

  <meta name="sessid" content="测试环境可用的token值">
  

• 方案2：动态拉取后端HTML解析token（适合需要真实token的开发场景）
  可以借助Angular的APP_INITIALIZER初始化钩子，在应用启动前先请求后端的入口HTML页面，解析出token后存储到本地，代码示例：
  1. 先在app.module.ts中配置初始化逻辑：

  import { APP_INITIALIZER } from '@angular/core';
  import { environment } from '../environments/environment';
  
  @NgModule({
    // 其他配置省略
    providers: [
      {
        provide: APP_INITIALIZER,
        useFactory: () => {
          return async () => {
            // 仅开发环境执行该逻辑
            if (environment.production) return;
            try {
              // 替换为你的后端服务根地址
              const res = await fetch('https://你的后端服务根地址/');
              const htmlStr = await res.text();
              const doc = new DOMParser().parseFromString(htmlStr, 'text/html');
              const sessidMeta = doc.querySelector('meta[name="sessid"]');
              if (sessidMeta) {
                const token = sessidMeta.getAttribute('content') || '';
                // 存储到localStorage或全局变量供后续使用
                localStorage.setItem('sessid', token);
              }
            } catch (e) {
              console.error('获取后端token失败', e);
            }
          };
        },
        multi: true
      }
    ]
  })
  export class AppModule { }
  

  2. 后续业务代码读取token逻辑：

  function getToken(): string {
    if (environment.production) {
      // 生产环境直接读取当前页面的meta标签
      return document.querySelector('meta[name="sessid"]')?.getAttribute('content') || '';
    } else {
      // 开发环境读取初始化时存储的token
      return localStorage.getItem('sessid') || '';
    }
  }
  

注意：如果请求后端HTML时出现跨域错误，需要后端配置CORS规则允许ng serve的服务地址（默认是http://localhost:4200）访问。

内容的提问来源于stack exchange，提问作者d689440