如何在Vue Storefront前端获取Magento 2客户ID

Magento 2 原生 GraphQL 接口出于安全约束，默认不会对仅携带客户授权Token的前端请求返回Customer类型的id字段，这就是直接在查询语句中加id字段返回null的核心原因，和查询语句的写法无关。

因为项目自带Express服务端模块，走服务端中转请求是最轻量、改动成本最低的实现方式，不需要修改Magento端代码，也不会泄露高权限凭证，具体实现分两步：

1. Express端新增中转接口 #

首先在Magento后台生成一个拥有客户读权限的集成访问令牌，这个令牌仅存在服务端，绝对不能暴露到前端。
在Express路由中新增接口，接收前端传来的当前用户客户Token，携带集成令牌向Magento GraphQL发起请求拉取客户ID，再把结果返回给前端，示例代码：

const express = require('express')
const router = express.Router()

// 替换为项目实际的Magento配置
const MAGENTO_GQL_API = 'https://你的Magento域名/graphql'
const MAGENTO_INTEGRATION_TOKEN = '后台生成的集成访问令牌'

router.get('/customer/id', async (req, res) => {
  const customerToken = req.headers.authorization?.split(' ')[1]
  if (!customerToken) return res.status(401).json({ code: 401, msg: '用户未登录' })

  try {
    const gqlRes = await fetch(MAGENTO_GQL_API, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${MAGENTO_INTEGRATION_TOKEN}`,
        'X-Customer-Token': customerToken
      },
      body: JSON.stringify({
        query: `query { customer { id } }`
      })
    })
    const gqlData = await gqlRes.json()
    if (gqlData.errors) throw new Error(gqlData.errors[0].message)
    res.json({ code: 200, data: gqlData.data.customer.id })
  } catch (e) {
    res.status(500).json({ code: 500, msg: e.message })
  }
})

module.exports = router

记得给这个接口加上项目现有的登录态校验逻辑，避免被恶意刷接口。

2. 前端封装可复用JS函数 #

在前端公共工具方法中封装调用函数，需要拿客户ID的时候直接调用即可，示例：

/**
 * 获取当前登录用户的Magento客户ID
 * @returns {Promise<string|null>} 客户ID
 */
export const getCustomerId = async () => {
  // 按项目实际存储位置取当前登录用户的token
  const customerToken = localStorage.getItem('vsf-user-token')
  if (!customerToken) return null

  try {
    const res = await fetch('/api/customer/id', {
      headers: { Authorization: `Bearer ${customerToken}` }
    })
    const result = await res.json()
    return result.code === 200 ? result.data : null
  } catch (err) {
    console.error('获取客户ID失败', err)
    return null
  }
}

如果不想加服务端中转，也可以在Magento端开发一个极简自定义GraphQL扩展，给Customer类型新增一个普通客户授权可访问的自定义字段（比如customer_uid），字段解析器直接返回当前授权客户的entity_id，这种方式前端可以直接在原有客户查询里加这个字段拿值，不需要走中转，但需要改动Magento端代码，适合有Magento后端开发能力的场景。

注意：即便暂不考虑安全风险，也绝对不要把Magento集成令牌直接写在前端代码中，会导致全量接口权限泄露，造成数据安全事故。

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