好吧,我从nuxt开始,我有以下路线:
<Private>
我想保护/home
/dashboard
/login
,但仅适用于使用Cookie在令牌中登录的用户。
然后我创建了一个中间件
/dashboard
并将中间件注册到我的布局或仪表板页面中
/middleware/auth.js
import Cookie from 'js-cookie'
export default function({ req, redirect }) {
if (process.server) {
if (!req.headers.cookie) return redirect('/login')
const jwtCookie = req.headers.cookie.split(';').find(c => c.trim().startsWith('jwt='))
if (!jwtCookie) return redirect('/login')
} else {
const jwt = Cookie.get('jwt')
if (!jwt) { window.location = '/login' }
}
}
当我访问<script>
export default {
middleware: 'auth',
}
</script>
时,看起来很正常
但是问题是中间件正在全局注册,它在所有页面,所有路由上运行
因此,当您访问发布页面的/dashboard
时,如果没有cookie,最终将被重定向到登录页面
有人帮忙吗?
答案 0 :(得分:1)
如何根据 route.path 参数创建条件?
export default function({ req, redirect, route }) {
if (!route.path.includes('dashboard')) { // if path doesn't include "dashboard", stop there
return;
}
if (process.server) {
if (!req.headers.cookie) return redirect('/login')
const jwtCookie = req.headers.cookie.split(';').find(c => c.trim().startsWith('jwt='))
if (!jwtCookie) return redirect('/login')
} else {
const jwt = Cookie.get('jwt')
if (!jwt) { window.location = '/login' }
}
}
因此,您仍然可以从预渲染中间件系统中受益。
答案 1 :(得分:0)
我认为,由于以下原因,您应将它们称为plugin
每条路线更改的中间件也不能在布局和subComponent中使用中间件,您可以将其用作plugin
并在任何地方都手动调用它,因为它是反应式的和运行时的。
path: /plugind/auth.js
import Cookie from 'js-cookie';
export default function({ req, redirect }) {
if (process.server) {
if (!req.headers.cookie) return redirect('/login')
const jwtCookie = req.headers.cookie.split(';').find(c =>
c.trim().startsWith('jwt='))
if (!jwtCookie) return redirect('/login')
} else {
const jwt = Cookie.get('jwt')
if (!jwt) { window.location = '/login'
}
}
}
答案 2 :(得分:0)
您可能已经在middleware/auth.js
中注册了nuxt.config.js
。
在nuxt.config.js
中注册中间件时,您正在全局注册它,这意味着将在每次路由更改时调用它。