javascript - 从前端 fetch() 请求调用时,Express res.redirect() 不重定向浏览器 URL

标签 javascript node.js reactjs express react-router

<分区>

我似乎遇到了一个我还没有遇到的问题。我在后端有一个 API 路由,当被调用时,将通过 res.redirect('/signin') 将浏览器 URL 重定向到 /signin (或者我认为) .使用 React Router,此 URL 将触发“重新登录”组件的呈现。这本质上是处理 JWT token 的过期,并处理在用户 token 过期时将用户发送回登录页面。

主要的 Dashboard 组件从后端接收一个 JWT token ,该 token 是在用户登录时为用户生成的。该 JWT token 用于前端访问 protected API 路由。 JWT token 存储在 localStorage 中,并带有过期时间。一旦 token 过期,它就会显示为未定义。当 Dashboard 组件重新安装时,它始终会检查 localStorage 以确保它具有有效的 JWT token 并且不是未定义的。

当 JWT token 过期并显示为 undefined 时,该组件调用后端路由处理将用户重定向回允许他们重新登录的 URL生成的 JWT token 。

最后,这里是一些代码(与此无关的代码已为简洁起见进行了编辑)

前端调用后端 logout 路由: 我在 componentDidUpdate() 中进行此调用,因为每次我的 Redux 存储都是更新后,这会重新呈现组件,再次检查有效 token ,并且由于它不会在初始组件安装时触发,所以它会为组件提供时间来存储 token 。

componentDidUpdate() {
const currentkey = localStorage.getItem('userToken');

    if(currentkey === 'undefined'){
       fetch('/account/logout', {
          method: 'GET'
       })
       .catch(err => {
          console.log(err)
       })
    }
 }

这是后端 logout 路由: 我尝试使用 res.redirect('/signin' ) 在这里无济于事。它在调用时不会更改 URL。它不会抛出错误或任何东西。它只是表面上被忽略了。当我向它添加 console.log() 时,我可以看到前端 fetch() 肯定会调用它,并触发 console.log( ),所以我至少知道它是从前端调用的。 postman 也确认路线可达。

 app.get('/account/logout', (req, res) => {
     res.redirect('/signin');
     console.log('logout route called');
 });

让我感到困惑的是,我的整个注册/登录系统在那些特定的路由中使用了 res.redirect(),并且一切正常。我从来没有遇到过 URL 不变的问题。

我应该以这种方式重定向用户吗?我什至可以使用这样的 fetch() 请求吗?正如我所提到的,我正在使用 React Router,所以我还想问一下是否有一种方法可以使用它来重定向浏览器 URL 而不是在后端处理它。

提前感谢您的阅读和任何见解!

最佳答案

您需要在客户端而不是服务器端进行重定向。你可以使用来自 React Router 的东西,比如 return <Redirect to='/somewhere'/>;例如检查后 this.state.redirect .

关于javascript - 从前端 fetch() 请求调用时,Express res.redirect() 不重定向浏览器 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51530303/

相关文章:

javascript - 在 Angular 中创建具有完整独立 CSS 的页面

mysql - Node + Passport + MySQL

android - 样式未应用于 child Prop

javascript - renderSortByOptions() 有什么作用?

node.js - 'npm 错误!请尝试以 root/管理员身份再次运行此命令 => 在一个终端中工作,但在另一个终端中不起作用 => 为什么?

javascript - Google map 对 Sencha Touch 2 中的事件不敏感

javascript - 如何使用按钮平滑地滚动到网页的不同部分? (最好不要使用 jQuery、Bootstrap 等)

javascript - 在动态元素上使用多个 JQuery UI 工具提示

javascript - express.js 限制 api 访问仅来自同一网站的页面

javascript - 如何导入导出模块返回值到其他js文件