如何 return axios get 请求中的值？

Question

我正在做一个 Vue 项目。现在我正在通过 JWT 处理身份验证。为此，我正在创建一个模块 "axios.js"，应将其导入 main.js 以允许进行令牌验证，从而向用户授予权限。

主要思想是将令牌传递给端点 /endpoint 并使其 return 状态代码。

我目前的问题是我无法 return 状态代码，我得到的是 Promise 而不是布尔值。

auth.js

import axios from "axios";

var config = {
  headers: { Authorization: "Bearer " + localStorage.getItem("usertoken") }
};

export default async function isAuth() {
  let responseStatus = axios.get("http://localhost:5000/endpoint", config);

  let status = await responseStatus.then(res => {
    if (res.status == 200) {
      return true;
    } else {
      return false;
    }
  });
  return status;
}

main.js 文件的相关部分如下。剩下的就是imports和routes，这里可能不需要。

main.js

import isAuth from "./axios/auth.js";

const router = new VueRouter({
  mode: "history",
  routes
});

router.beforeEach((to, from, next) => {
  // eslint-disable-next-line no-console
  console.log(isAuth());
  var requiresAuth = to.matched.some(record => record.meta.requiresAuth);

  if (requiresAuth && !isAuth()) {
    next("/login");
  } else if (to.path == "/login" && isAuth()) {
    next("/home");
  } else {
    next();
  }
});

在下面的 main.js 中找到带有 console.log(isAuth()) 的打印屏幕：

console log

如果需要更多信息，请告诉我！谢谢。

Answer 1

Axios.get 已经 return 是一个承诺，因此您只需 return axios.get(...) 来自您的 isAuth 功能。然后，在使用 isAuth 函数的地方，您可以运行 isAuth().then(...) 或通过 await isAuth();[=20 使用 async/await =]

import isAuth from './axios/auth.js'

var config = {
  headers: {
    'Authorization': "Bearer " + localStorage.getItem('usertoken')
  }
};

export default async function isAuth() {
  // Axios.get already returns a promise, so just return Axios.get
  return axios.get("http://localhost:5000/endpoint", config);
}


const router = new VueRouter({
  mode: 'history',
  routes
})


router.beforeEach((to, from, next) => {
  // eslint-disable-next-line no-console
  console.log(isAuth()) // This will just log a Promise.
  var requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  isAuth().then(result => {
    if (result) {
      // result success
    } else {
      // result fail
    }
  });
});


// Or, with async/await

router.beforeEach(async(to, from, next) => {
  // eslint-disable-next-line no-console
  console.log(isAuth()) // This will just log a Promise.
  var requiresAuth = to.matched.some(record => record.meta.requiresAuth);
  const isAuthed = await isAuth();
  if (isAuthed) {
    // result success
  } else {
    // result fail
  }
});

另外，请注意 Promises 也有一个 .catch 错误处理函数。您可能想要添加它，以便您可以处理端点 returned 的任何异常。

如何 return axios get 请求中的值？

How to return the value inside an axios get request?

javascript

vue.js

es6-promise

vue-router

axios