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
刷新状态即可,不需要手动刷新页面,完美解决!
还是要多看文档呢