您的位置:首页 > 汽车 > 新车 > [nextjs]路由拦截守卫踩坑

[nextjs]路由拦截守卫踩坑

2024/7/4 5:51:22 来源:https://blog.csdn.net/ZhuAiQuan/article/details/139300247  浏览:    关键词:[nextjs]路由拦截守卫踩坑

Next.js v14 App Router模式

next想实现类似vue这种路由拦截器,其实使用next.js自带的中间件就行了。
现在遇到一个问题是有些页面需要登录后才能访问,
比如

const needLoginRoutes = [/\/account/g, /\/deposit/g];...// 中间件里if (needLoginRoutes.some((reg) => reg.test(req.nextUrl.pathname)) && !req.cookies.has(TOKEN)) {return NextResponse.redirect(new URL(`${req.nextUrl.origin}/${lng}?type=login`));}

这里判断访问的路由是否在needLoginRoutes数组里及判断是否存在token
不存在则会重定向到首页去登陆;

这里一切都是正常工作的

直到我登录后获取到token并存放到cookies里

我再去访问needLoginRoutes匹配的路由,发现依然跳转到了登录窗口,尝试过几次都是这样(原谅我菜)
问题肯定是出现在middleware中间件上,通过调试发现这里的判断依然是false 读取不到请求头里cookie里的token,但是明明请求头里有token呢;
百思不得其姐~
或许是存在路由器缓存,如果手动刷新页面就不会拦截到了;

只能暂时先使用笨方法,在设置cookies后刷新页面,重新像服务器请求页面;

后来偶然间发现 useRouter 里有一个api是专门用来刷新服务器的refresh
直接使用refresh刷新状态即可,不需要手动刷新页面,完美解决!

还是要多看文档呢

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com