Nuxt3中如何访问app.$keycloak、获取token及自动注入请求头？

一、在页面中访问app.$keycloak实例 #

Nuxt3中，插件挂载到app上的属性，推荐通过useNuxtApp()这个composable来访问，适配<script setup>和选项式API两种写法：

在<script setup>中使用 #

<script setup>
import { useNuxtApp } from '#app'

const nuxtApp = useNuxtApp()
// 获取keycloak实例
const keycloak = nuxtApp.$keycloak
</script>

在选项式API中使用 #

<script>
export default {
  mounted() {
    // 直接通过this访问实例
    const keycloak = this.$keycloak
  }
}
</script>

二、获取Access Token #

拿到Keycloak实例后，直接读取token属性即可（对应keycloak-js中的access_token），注意要先确认实例已完成认证：

const nuxtApp = useNuxtApp()
const keycloak = nuxtApp.$keycloak

// 先判断认证状态，避免获取到undefined
if (keycloak.authenticated) {
  const accessToken = keycloak.token
  // 可直接用于后续请求或逻辑处理
  console.log('Access Token:', accessToken)
}

注意：如果Keycloak插件的init方法还未执行完毕，authenticated会是false，需等待初始化完成后再获取token。

三、自动注入Authorization: Bearer <token>请求头 #

有两种常用实现方式，按需选择：

方式1：全局请求拦截器（推荐） #

在你的Keycloak插件中添加fetch:request钩子，拦截所有$fetch、useFetch、useAsyncData发起的请求，自动为指定路径的API添加认证头：

// plugins/keycloak.ts
export default defineNuxtPlugin((nuxtApp) => {
  const keycloak = nuxtApp.$keycloak

  // 拦截请求并注入认证头
  nuxtApp.hook('fetch:request', async (options) => {
    // 仅对目标外部API路径生效（这里以/api/开头为例）
    if (options.url.startsWith('/api/')) {
      if (keycloak.authenticated) {
        // 可选：提前刷新即将过期的token（30秒内过期则触发刷新）
        const isRefreshed = await keycloak.updateToken(30)
        if (isRefreshed) {
          console.log('Token refreshed successfully')
        }
        // 注入Authorization头
        options.headers = {
          ...options.headers,
          Authorization: `Bearer ${keycloak.token}`
        }
      }
    }
  })

  // 挂载keycloak到app实例（你的原有代码）
  nuxtApp.$keycloak = keycloak
})

方式2：封装自定义API请求Composable #

如果不想全局拦截所有请求，可以封装专属的API请求函数，内部自动处理认证头：

// composables/useApiFetch.ts
import type { FetchOptions } from 'ofetch'

export const useApiFetch = (url: string, options: FetchOptions = {}) => {
  const nuxtApp = useNuxtApp()
  const keycloak = nuxtApp.$keycloak

  // 构建请求头
  const requestHeaders = {
    ...options.headers,
    // 已认证时才添加Authorization头
    ...(keycloak.authenticated ? { Authorization: `Bearer ${keycloak.token}` } : {})
  }

  return useFetch(url, {
    ...options,
    headers: requestHeaders,
    baseURL: '/api/' // 替换为你的外部API基础地址
  })
}

在页面中使用这个自定义Composable：

<script setup>
// 调用外部API时自动注入认证头
const { data, error } = await useApiFetch('users')
</script>

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