Nuxt asyncData无法访问需授权的Express路由的解决方案咨询

核心问题原因 #

你碰到的问题本质是服务端渲染阶段（asyncData运行期）无法获取浏览器端存储的授权凭证，客户端钩子中发起的请求能直接读取本地存储的token/cookie，所以可以正常请求，下面给出两种可行实现方案：

方案1：SSR服务端渲染方案（优先推荐，用户体验最优） #

如果你的授权凭证存储在Cookie中，服务端可以直接读取页面请求时携带的Cookie，透传给后端接口即可，不需要修改为客户端请求，页面在服务端就会完成数据渲染，用户打开直接可见内容：

async asyncData({ $config: { apiURL }, req }) {
  // 仅服务端运行时存在req对象，客户端跳转时asyncData在前端运行可以直接读取本地cookie
  const requestHeaders = req ? { Cookie: req.headers.cookie } : {}
  // 如果用Authorization头鉴权，解析Cookie中的token拼接到headers即可
  let orders = await axios.get(
      `${apiURL}/orders`,
      { headers: requestHeaders }
  );
  return { orders: orders.data.data };
},

方案2：客户端自动请求方案（适配token存储在localStorage的场景） #

如果授权凭证存在localStorage中，服务端无法读取，可以不用asyncData，在页面生命周期钩子中自动发起请求，不需要用户点击触发：

export default {
  data() {
    return {
      orders: [],
      loading: true // 配合加载动画/骨架屏提升体验
    }
  },
  async created() {
    const token = window.localStorage.getItem('你的token存储key')
    try {
      const res = await axios.get(
        `${this.$config.apiURL}/orders`,
        { headers: { Authorization: `Bearer ${token}` } }
      )
      this.orders = res.data.data
    } catch (err) {
      // 鉴权失败直接跳转登录页
      this.$router.push('/login')
    } finally {
      this.loading = false
    }
  }
}

额外优化建议 #

• 可以把授权头携带逻辑封装到axios全局拦截器中，不需要每个请求单独配置
• 订单页面新增路由守卫，未登录用户直接跳转登录页，无需等到请求失败再处理
• 客户端渲染场景下可配合骨架屏、加载动画，避免用户长时间看到空白页面

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