【Bug排查】Uncaught (in promise) Error: Infinite redirect in navigation guard

这篇具有很好参考价值的文章主要介绍了【Bug排查】Uncaught (in promise) Error: Infinite redirect in navigation guard。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

记一次Bug排查

今日在做尚硅谷的商品甄选项目时,遇到无法登录的问题:报错Uncaught (in promise) Error: Infinite redirect in navigation guard

一开始我去搜CSDN,都说是路由的问题,我对前端也不了解,试着改了一下,发现没有用。我怀疑是前端包的问题,于是我重新下载解压了若干次资料中的前端包 —— 最原始的模板,下载完依赖的模板,甚至所有前端代码都写完的代码,都还是那个问题。

前端模板刚拿过来时好用的,但在进行了一系列修改后,就出现登录界面一直转圈进不去报错的问题了。我从头开始,重复每一步的修改,然后去看界面有没有问题。

我注意到,当我修改完后端接口,并把api路径修改为自己的路径后,就出现错误了。这时,我才想起来打开F12查看Network,发现getUserinfo这个接口被调了10多次,我发现问题不对了,明明只点击了一次登录,为什么会调这么多次。

我去前端代码里搜寻getUserinfo这个接口的调用,发现有这样一段代码:

if (!userinfo) {
  try {
    // 获取用户信息
    await getUserinfo()
  } catch (err) {
    loadingInstance.close()
    return false
  }

  return to.fullPath
}

这段代码当userinfo为空时,就会一直调用getUserinfo()这个方法,难道我获取userinfo都是空吗?于是在控制台打印userinfo,竟然真的是清一色的null!

看来是后端出了问题,我再到后端去看,后端有一个controller返回的用户信息是SysUser类

@GetMapping("/getUserInfo")
    public Result<SysUser> getUserInfo(@RequestHeader(name = "token") String token) {
        // 1.从请求头获取token
        // 2.根据token从redis查询用户信息
        SysUser sysUser = sysUserService.getUserInfo(token);
        // 3.返回用户信息
        return Result.ok(sysUser);
    }

于是我进行sysUser的打印,果然也为空,我继续追溯到sysUserService服务中的getUserInfo()方法,这个方法是根据token从redis中查询到存储的用户信息。

public SysUser getUserInfo(String token) {
    //redis取数据
        String userJson = redisTemplate.opsForValue().get(RedisKeyEnum.USER_LOGIN + token);
        System.out.println("userJson:"+userJson);
        return JSON.parseObject(userJson, SysUser.class);
    }

乍一看我还没发现这个get()方法有啥问题,但当我与上面写的redis的set()方法作对比时,恍然大悟:

// redis存数据
redisTemplate.opsForValue()
                .set(RedisKeyEnum.USER_LOGIN.getValue() + token,
                        JSON.toJSONString(sysUser),
                        7, TimeUnit.DAYS);

发现没?key不一样!

在set的时候是RedisKeyEnum.USER_LOGIN.getValue(),而在get的时候就忘了加getValue()了,结果当然不对,自然就查不到对应的用户信息,前端自然会出问题了。

到头来还是个低级错误啊。。。


所以在自己做项目时,界面上出现了问题,第一反应是看后端请求有没有问题,而不是抓着前端不放,后台管理项目的前端大部分都是既定模板,只要修改正确,不会出啥问题,往往后端的一些小纰漏才是问题的根源。文章来源地址https://www.toymoban.com/news/detail-722834.html

到了这里,关于【Bug排查】Uncaught (in promise) Error: Infinite redirect in navigation guard的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 解决Vue报错:Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location...

    解决方案: 方案一:只需在 router 文件夹下,添加如下代码: 方案二、使用 catch 方法捕获 router.push 异常。 方案三、在跳转时,判断是否跳转路由和当前路由是否一致,避免重复跳转产生问题。 index路由文件 菜单组件 修改后的截图

    2024年02月17日
    浏览(59)
  • vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation

    vue-router.esm.js?a12b:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: \\\"/home\\\".   报错原因:重复点击路由导致,因为vue-router引入了promise,当我们使用this.$router.push时候需要多添加成功或失败的回调,否则就会报出以上的错误。 原代码 第一种         在进

    2023年04月08日
    浏览(132)
  • 【前端异常】JavaScript错误处理:分析 Uncaught(in promise) error

    在开发过程中,JavaScript的错误处理是一个老生常谈的话题。当应用程序发生未捕获的异常时,Uncaught(in promise) error是其中最常见的错误类型。这篇文章将从多个方面详细阐述这种错误类型的原因与解决方案。 Promise是一种用于异步编程的原生JavaScript对象。它提供了一种处理异

    2024年02月05日
    浏览(89)
  • 解决:Uncaught (in promise) Error: Request failed with status code 400

    问题: 在写项目的时候,获取三级联动的数据,一直报以下错误 定位问题: 这个错误信息可能与在前端调用接口时存在问题有关。 400 (Bad Request) 错误可能是由于请求参数不正确或者缺少必要参数导致的。 具体指向: 这个错误信息中指定了一个URL,即 http://localhost:9528/dev-

    2024年02月08日
    浏览(39)
  • axios发送POST请求返回400状态:Uncaught (in promise) Error: Request failed with status code 400。

    问题:在postman上发送post请求时就能成功获得返回数据,但是在前端发送却得不到返回数据。 400错误,大概率就是 请求头、数据类型/参数名 ,前后端不一致 排查前端:发现前端的post请求头中 contentType: application/json 格式 排查后端:后端的接口的接收方式 ,已经添加 @Cros

    2024年02月09日
    浏览(61)
  • GET http://localhost:8080/xx/xx 404 (Not Found) 和Uncaught (in promise) Error: failed报错的原因

    这两天,我遇见了一个很离谱的错误,我找不到原因发生在哪里,但是知道代理服务器出错了,代理了后端给的接口,但是,却向本地发起请求,快把我整崩溃了 GET http://localhost:8080/xx/xx 404 (Not Found) 和Uncaught (in promise) Error: failed 开启代理后,发起请求,因为后端给的路径没有

    2024年02月07日
    浏览(54)
  • Uncaught (in promise)和Uncaught (in promise) TypeError: Cannot read properties of undefined (readin

    只要在后面加上.catch((e) = {}),就不会报错了,    这个问题的解决要想resolve(),在commit()不然就会报错,注意:先后的顺序

    2024年02月09日
    浏览(49)
  • Uncaught (in promise)解决方法

    \\\"Uncaught (in promise)\\\" 是 JavaScript 的一种错误,通常是在执行 Promise 时发生的。解决方法可能有以下几种: 在 catch 块中处理错误。例如:

    2024年02月16日
    浏览(50)
  • ❤ 报`Uncaught (in promise)`错误解决办法

    使用了promise,但是在使用的过程中报Uncaught (in promise)错误,第一次遇到这种错误,记录下,方便以后解决 ❤ 问题: ❤ 解决: 后面加上new Promise((resolve, reject) ={}).catch((e) = {}),就不会报错了

    2024年02月07日
    浏览(62)
  • 报`Uncaught (in promise)`错误解决办法

    使用了promise,但是在使用的过程中报 Uncaught (in promise) 错误,第一次遇到这种错误,所以在此记录下,方便以后解决问题 只要在 new Promise 后面加上 new Promise((resolve, reject) ={}).catch((e) = {}) ,就不会报错了 有收获?希望老铁们来个三连击,给更多的同学看到这篇文章 1、老铁们,

    2024年02月11日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包