身份验证辅助函数返回未定义而不是布尔值

Question

我正在创建一个使用React和Node的客户端和服务器的网页。

在我的客户端，在每个组件中，对于某些授权角色的敏感页面，我都有一个函数来检查用户是否登录，如果是，则组件照常呈现。

// This section of code is present in all sensitive pages.
const [permit, setPermit] = useState(null)
useEffect(() => {
axios.post('http://localhost:3000/checkCookie').then((res) => {
const result = res.data.authenticated
if (result) {
setPermit(true) // conditional rendering of 'permit'

}
})
}, [])

由于我有许多组件，我创建了一个单独的js文件，并将这段代码块放入其中，然后将其导出为一个函数。

axios.defaults.withCredentials = true
export const authService = (cookie) => {
axios.post("http://localhost:3000/checkCookie", cookie).then(res => {
if (res.data.authenticated) {
return true
}

return false
})
}

import {authService} from '../api/api'
const [permit, setPermit] = useState(null)
useEffect(() => {
setPermit(authService(document.cookie))
}, [])

但是，authService helper函数不返回true或false。当我console.log(authService(document.cookie))时，它返回一个未定义的值。在helper函数本身中，代码可以工作，但是当向另一个组件返回布尔值或任何值时，它只是返回undefined。

Answer 1

您使用的异步函数在同步代码中不返回任何内容。所以没有定义。即使您将return添加到axios.post...前面，通过简单地在setPermit(authService(...))中调用它，您将将permit设置为promise，而不是该承诺的结果。因为这是同步代码中的异步代码。因此，在设置它之前需要等待结果。

首先你应该确保返回promise调用。

export const authService = (cookie) => {
return axios.post("http://localhost:3000/checkCookie", cookie).then(res => {
if (res.data.authenticated) {
return true
}

return false
})
}

在useEffect中你应该等待这个结果

import {authService} from '../api/api'
const [permit, setPermit] = useState(null)
useEffect(async () => {
const authenticated = await authService(document.cookie)
setPermit(authenticated)
}, [])