4

好吧，我从 nuxt 开始，我有以下路线：

/home

/dashboard

/login

我想保护/dashboard，但仅适用于使用 Cookie 中的令牌登录的用户。

然后我创建了一个中间件

/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显然工作正常

但问题是中间件正在全局注册，它在所有页面上运行，所有路由

因此，当您访问/home已发布的页面时，如果您没有 cookie，您最终会被重定向到登录页面

有人帮忙吗？

4

3 回答 3

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' }
  }
}

因此，您仍然可以从预渲染中间件系统中受益。

于 2021-01-23T09:24:22.550 回答
0

您可能已经middleware/auth.js在您的nuxt.config.js. 当您在 中注册中间件时nuxt.config.js，您将在全局范围内注册它，这意味着每次路由更改都会调用它。

文档： https ://nuxtjs.org/guide/routing#middleware

于 2020-03-20T13:24:29.683 回答
-1

在我看来，你应该调用它们plugin，因为每个路由调用的中间件都发生了变化，你也不能在布局和子组件中使用中间件，你可以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'
   }
  }
 }
于 2018-09-10T05:31:10.590 回答