nuxt3 api如何透传(不引第3方库)
背景:
nuxt做为一个vue的服务端渲染框架,本身就具备服务端的功能,理论上可以完整做一个系统功能,包括对数据库等等操作,但更合理的做法是nuxt应该定位只做服务端渲染的事情,更偏向ui层面,而非数据curd,业务逻辑,权限等等偏向服务端的逻辑。本身基于vue的服务端渲染已经也挺耗性能,所以应该单独规划一层,类似bff+ui;
按这个规划nuxt的数据来源就应该是透传到内部的服务器,那么怎样实现透传呢?
解决方案:
1.如果服务端设计的session存储方式是cookie,则可以通过配置nuxt.config.ts
routeRules: {"/sapi/**": {proxy: {to: "http://xxx/**",},},},
的方式,将本地请求地址/api/xx,完全代理到http://xxx/xx
类似nginx的代理功能;用nginx完全可以代替,性能可能还更好
2.如果服务端设计的是jwt,在header加其他字段保存的方式,那上面的方式就不行了
为什么不行?因为一个界面打开的时候,请求头是不会自动带任何自定义的东西的,这个功能只有cookie才能完成。所以如果登录后,刷新一个需要登录后的页面,这个获取不到页面任何凭证,所以会退出到登录页。要完整实现这种功能就需要做一些中间件拦截代理请求,将token获取到后,转成cookie下发到客户端,同时拦截客户端提交请求