如何在Vue 3应用中读取请求头中的JWT信息？

首先得明确：Vue 3是运行在浏览器中的前端应用，无法直接获取浏览器发起初始页面请求时的HTTP请求头——这是浏览器的安全限制，前端JS没有权限访问这些请求头信息（和后端Flask能直接拿到请求头的逻辑完全不同）。

针对你的Kubernetes部署场景，结合上层外部认证服务的架构，有两种可行的方案：

方案1：让外部认证服务将JWT注入到页面中 #

上层的认证服务（比如Ingress Controller、OAuth2代理等）可以在返回Vue应用的index.html页面时，把JWT令牌或其解析后的用户信息注入到页面里，比如写入全局变量或meta标签。

举个具体的实现例子：

1. 配置外部服务（比如Nginx Ingress），在转发请求到Vue应用时，将请求头中的JWT注入到index.html的<script>标签中：

   <!-- index.html 被注入后 -->
   <script>
     // 由外部服务填充实际的JWT内容
     window.APP_INITIAL_DATA = {
       jwt: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...'
     };
   </script>
   

2. 在Vue应用初始化时读取这个全局变量，再解析JWT：

   // main.js
   import { createApp } from 'vue'
   import App from './App.vue'
   import router from './router'
   import store from './store'
   
   // 读取注入的JWT
   const initialJwt = window.APP_INITIAL_DATA?.jwt
   if (initialJwt) {
     // 解析JWT（可使用jose、jsonwebtoken等库）
     const decoded = decodeJwt(initialJwt)
     // 把用户信息存入状态管理，供路由守卫使用
     store.dispatch('setUser', decoded)
   }
   
   createApp(App).use(router).use(store).mount('#app')
   

3. 之后在vue-router的beforeEach中，就可以从状态管理中读取用户权限，做路由拦截了。

方案2：通过Cookie或后端接口获取用户信息 #

如果外部认证服务将JWT存储在Cookie中：

• 如果Cookie不是HttpOnly，可以直接用document.cookie读取并解析JWT：

  // 从Cookie中提取JWT
  function getJwtFromCookie() {
    const cookies = document.cookie.split('; ')
    for (const cookie of cookies) {
      const [name, value] = cookie.split('=')
      if (name === 'auth_token') {
        return value
      }
    }
    return null
  }
  

• 如果Cookie是HttpOnly（更安全的配置），前端无法直接读取，这时候需要后端提供一个获取用户信息的接口（比如/api/user/me），前端调用这个接口后，后端会自动从Cookie中读取JWT并返回解析后的用户信息，前端再用这些信息做权限判断。

关键提醒 #

vue-router的beforeEach是前端路由守卫，仅处理前端路由跳转逻辑，和浏览器发起的HTTP请求头没有关联，所以无法在这里直接获取初始请求的头信息。必须在应用初始化阶段先拿到JWT或用户信息，再在路由守卫中使用这些数据。

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