Question

好吧，我从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，最终将被重定向到登录页面

有人帮忙吗？

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

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

Answer 2

我认为，由于以下原因，您应将它们称为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'
   }
  }
 }

Answer 3

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

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

特定页面上的中间件-NuxtJS

3 个答案: