Question

我在这里有一个问题。我将Vue.js与Nuxt.js一起使用。

我制作了中间件来实现身份验证。在这里，我使用JSON Web令牌。我有accessKey和refreshKey。当accessKey过期时，refreshKey用于请求新的accessKey。因此，在中间件中，我调用向API发出请求的操作。这是我的代码：

home / index.vue

<template>
I'm protected resource
</template>

<script>
export default {
  middleware: 'authentication'
}
</script>

middleware / authentication.js

import { isEmpty } from 'lodash'
export default async function({ store, redirect, app }) {
  if (isEmpty(refKey)) {
    //logout
  }
  if (isLogin && !isEmpty(accKey)) {
    // store auth data
  } else if (isLogin && isEmpty(accKey)) {
    // call action that make request with axios to the API
    return await store.dispatch('user/requestNewToken')
  } else {
    return redirect('/')
  }
}

我的动作

async requestNewToken({ dispatch, commit }) {
    const refreshReq = await dispatch('refreshToken')
    if (!isUndefined(refreshReq) {
      await dispatch('setupAuthCookies')
      return refreshReq
    }
  },

但是应用程序返回错误。这是因为页面是在AXIOS请求完成之前呈现的。在我的axios请求（用于获取新的accessKey）完全完成之前，如何防止Vue重定向和呈现页面？谢谢。

呈现页面之前，位于中间件中的等待请求已完成

0 个答案: