vue.js - 在不更改路由的情况下重新评估 Nuxt.js 中间件

Question

我想知道是否有可能在不实际更改当前路由的情况下从本质上“重新评估”中间件条件。

中间件的目的是防止未登录的用户访问“仪表板”。我的问题是，用户可以登录或注销而不必更改路由，但在他们尝试更改页面之前不会被重定向。

我有一个 VueX 操作，当用户的身份验证状态发生变化时触发，但是这个(据我所知)无法访问重定向或路由变量。

// /mixins/auth.js
const reevaluateAuthStatus = (store, redirect, route) => {
  console.log(route)
  const redirectPolicy = route.meta.map((meta) => {
    if (meta.auth && typeof meta.auth.redirectPolicy !== 'undefined') { return meta.auth.redirectPolicy[0] }
    return []
  })

  const user = store.getters['auth/getUser']
  if (redirectPolicy.includes('LOGGEDOUT')) {
    if (user) {
      return redirect('/dashboard')
    }
  } else if (redirectPolicy.includes('LOGGEDIN')) {
    if (!user) {
      return redirect('/login')
    }
  }
}

module.exports = {
  reevaluateAuthStatus
}

// /middleware/auth.js
import { reevaluateAuthStatus } from '../mixins/auth'

export default function ({ store, redirect, route }) {
  reevaluateAuthStatus(store, redirect, route)
}

感谢对此的任何帮助:)

Answer 1

您不能重新评估中间件 AFAIK，因为它主要是这个(如 the documentation 中所述)

middlewares will be called [...] on the client-side when navigating to further routes

您仍然可以通过 2 种干净的方式实现此 IMO:

• 使用一些 websockets，或者使用 socket.io或类似 Apollo Subscriptions 的东西, 让您的 UI 考虑到新的变化
• 将您的中间件逻辑导出到某种调用，您可以通过 calling the $fetch hook again 再次触发该调用或任何其他 data-related fetching hook在 Nuxt

一些更丑陋的解决方案可能是:

• 制作内部setInterval并每 5 秒左右检查一次实际状态是否仍然有效
• 使用类似this.$router.go(0) 的内容移动到您实际所在的同一页面，如 Vue router documentation 中以某种方式解释的那样

不过，在大多数情况下，我认为如果用户已注销，这可能不是一个大问题，因为一旦他尝试某些操作，他就会被重定向。
就好像用户已登录一样，我什至不确定如果他没有在您的 SPA 上做一些主动的事情，这种情况会发生在哪种情况下。