公司部分项目后端迁移，迁移后需要在请求头里面加一个用来标识用户 id 的字段

背景:

公司部分项目后端迁移，迁移后需要在请求头里面加一个用来标识用户 id 的字段

思路：

其实思路理解起来很简单

  • 方案一、
    1、在用户登陆的时候在 server 端拿出用户 id 字段
    2、将这个字段挂载到 koa 的上下文中
    3、node 请求代理转发的时候将这个值通过 ctx.req.header[‘userId’] = ctx.userId;这种方式挂载到 request 中转发到后端
  • 方案二
    1、在用户登陆的时候在 server 端拿出标识用户 id 的字段
    2、将这个字段通过的方式在页面渲染的时候挂载到 window 全局对象中
    3、在 client 端用户请求时 header 中带入这个所需的字段和值也可

遇到的问题

1、本项目与其他所负责的项目不同，在 node 端代理转发引的是开源脚手架，没有 header 这种外部传入 option，即无法通过 koa 上下文在代理转发的方式将所需传入的字段和值注入 header 中,方案一搁浅
2、在用方案二做处理时，可以参看以下代码：

模版注入： spa.js

1
await ctx.render('layout.js', { user })

在 layout.js 模版中

1
2
3
4
5
6
7
8
9
10
;({ user }) => {
  return `

  <script>
    window.User = {
      userId: ${user.id},
    };
    </script>
  `
}

request 在 client 端

1
2
3
4
const newHeaders = {
  ...headers,
  UserId: (window.User && window.User.userId) || ''
}

如上，script 在模版中的引入写在页面最底部，一开始通过 log 日志发现，winodw 中挂载的用户信息总是在请求以后才会正常展示，在请求前总是 log 出默认的空值

原因：

渲染页面时，lib 是渲染在当前项目所有脚本的最前面，如果将挂载用户信息的脚本写在最后面也就是在 jsx 文件加载完以后再挂载用户信息，这样的话，用户信息的挂载就没有用了，即在该项目中，挂载用户信息的 script 应写在页面渲染的最前面，可直接挂载在 header 中，这样 window 中的 user 值即可在请求前挂载

写在最后

1、注意总结
2、注意细节