Angular Universal SSR配置X-XSRF-TOKEN请求头遇401问题求助
Angular Universal SSR 配置XSRF Token适配Laravel Sanctum遇401问题
我正在配置Angular Universal SSR以适配XSRF token,当前遇到如下问题:
在/profile路由下,页面由服务端渲染时控制台抛出401未授权错误:
ERROR HttpErrorResponse { headers: HttpHeaders { normalizedNames: Map(0) {}, lazyUpdate: null, lazyInit: [Function (anonymous)] }, status: 401, statusText: 'Unauthorized', url: 'http://localhost/api/public/user', ok: false, name: 'HttpErrorResponse', message: 'Http failure response for http://localhost/api/public/user: 401 Unauthorized', error: { message: 'Unauthenticated.' } }
浏览器会先短暂显示登录页面(由路由守卫触发),完成hydration后才显示个人资料页。我需要直接显示个人资料页,避免登录页闪烁,因此尝试在服务端请求中添加XSRF token,确保渲染时后端请求携带正确token以返回用户资料。
相关代码如下:
server.ts
server.get('*', (req, res, next) => { const { protocol, originalUrl, baseUrl, headers } = req; // @ts-ignore req.myCustomData = { xsrfToken: getXsrfToken(req.headers.cookie) }; // @ts-ignore console.log('token on server', req.myCustomData); commonEngine .render({ bootstrap: AppServerModule, documentFilePath: indexHtml, url: `${protocol}://${headers.host}${originalUrl}`, publicPath: distFolder, providers: [ { provide: APP_BASE_HREF, useValue: baseUrl }, { provide: RESPONSE, useValue: res }, { provide: REQUEST, useValue: req } ], }) .then((html) => res.send(html)) .catch((err) => next(err)); });
xsrf-token.interceptor.ts
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> { if (isPlatformServer(this.platformId)) { console.log(this.request.myCustomData); const serverReq = req.clone({ headers: req.headers.set('X-XSRF-TOKEN', this.request.myCustomData.xsrfToken), withCredentials: true }); return next.handle(serverReq); } }
目前服务端控制台已能正常打印出token,后端使用Laravel Sanctum认证,要求Cookie包含XSRF-TOKEN且请求头携带X-Xsrf-Token才能返回200响应。请问我哪里配置出错了?当前的解决方向是否正确?Angular SSR官方文档资料较少,恳请指导。
内容的提问来源于stack exchange,提问作者Lukáš Zatloukal
相关产品推荐
相关产品推荐

