Vue.js中如何获取JWT认证令牌通过Axios向WordPress Contact Form7端点提交表单数据

基础思路验证 #

你当前的核心逻辑是成立的：请求JWT接口获取令牌→存入本地存储→后续Axios请求自动携带令牌，流程本身没有问题，但有一个必须优先修正的风险：绝对不可将管理员的用户名、密码硬编码在前端代码中，所有前端代码对用户都是可查的，会直接导致站点控制权泄露。

具体落地步骤 #

1. WordPress端前置配置 #

• 新建一个最低权限的WordPress用户（仅分配「订阅者」角色即可），该账号仅用于CF7表单提交，严禁使用管理员账号
• 完成JWT认证插件的配置，开启跨域支持，放行你的前端域名请求权限
• 可选优化：可以在WordPress中新增一个自定义公开REST接口，内部调用JWT生成逻辑返回低权限令牌，前端无需传递账号密码，避免凭证泄露

2. 前端代码补全 #

你缺失的是令牌不存在、过期时的自动获取逻辑，建议通过Axios拦截器实现，修改后的代码参考如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Axios from 'axios'

Vue.prototype.$http = Axios;
// 替换为你的站点地址
const WP_BASE_URL = 'https://www.[my website address].com'

// 封装获取JWT令牌的方法
const getNewToken = async () => {
  try {
    // 如果你用了自定义公开接口就请求自定义接口，不需要传账号密码
    const res = await Axios.post(`${WP_BASE_URL}/wp-json/jwt-auth/v1/token`, {
      username: '你的低权限账号用户名',
      password: '你的低权限账号密码'
    })
    const token = `Bearer ${res.data.token}`
    localStorage.setItem('access_token', token)
    Axios.defaults.headers.common['Authorization'] = token
    return token
  } catch (err) {
    console.error('令牌获取失败', err)
  }
}

// 请求拦截器：请求前判断是否有令牌，无则先获取
Axios.interceptors.request.use(async (config) => {
  let token = localStorage.getItem('access_token')
  if (!token) {
    token = await getNewToken()
  }
  config.headers.Authorization = token
  return config
})

// 响应拦截器：遇到401认证失败时，清空旧令牌重新获取
Axios.interceptors.response.use(
  (response) => response,
  async (error) => {
    if (error.response?.status === 401) {
      localStorage.removeItem('access_token')
      await getNewToken()
      // 重试之前失败的请求
      return Axios(error.config)
    }
    return Promise.reject(error)
  }
)

new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app')

额外优化建议 #

• 如果你的CF7表单允许访客提交，完全不需要走JWT认证，直接POST请求对应CF7端点即可，流程会简化很多
• JWT令牌存在默认有效期，不要依赖永久存储，上述拦截器逻辑已经覆盖了过期自动刷新的场景

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