React+Node项目封装的认证辅助函数返回undefined而非布尔值如何解决

问题根因 #

你遇到的返回undefined问题有两个核心原因：

• authService 函数没有显式返回 axios.post 的执行结果，外层函数默认返回值为undefined
• axios.post 是异步请求，返回值是Promise对象，即使你补了return，也不能直接把返回值赋值给permit，需要等待异步请求执行完成后才能拿到布尔结果

解决方案 #

第一步：修改authService封装 #

你可以选择任意一种写法修正封装方式：

方式1：Promise链式写法

axios.defaults.withCredentials = true
export const authService = (cookie) => {
    // 新增return返回Promise对象
    return axios.post("http://localhost:3000/checkCookie", cookie).then(res => {
        return !!res.data.authenticated
    }).catch(err => {
        // 接口异常时默认返回无权限，避免页面异常
        console.error('权限校验接口请求失败', err)
        return false
    })
}

方式2：更简洁的async/await写法

axios.defaults.withCredentials = true
export const authService = async (cookie) => {
    try {
        const res = await axios.post("http://localhost:3000/checkCookie", cookie)
        return !!res.data.authenticated
    } catch(err) {
        console.error('权限校验接口请求失败', err)
        return false
    }
}

第二步：修改组件内调用逻辑 #

异步返回的是Promise对象，需要等待异步执行完成后再给permit赋值：

import {authService} from '../api/api'
const [permit, setPermit] = useState(null)
useEffect(() => {
    // 定义异步函数处理权限校验
    const checkPermission = async () => {
        const result = await authService(document.cookie)
        setPermit(result)
    }
    checkPermission()
}, [])

进阶优化：封装为自定义Hook进一步简化复用 #

如果想进一步减少重复代码，可以把权限校验逻辑封装为React自定义Hook，所有敏感页面直接调用即可：

// hooks/useAuth.js
import { useState, useEffect } from 'react'
import { authService } from '../api/api'

export const useAuth = () => {
    const [permit, setPermit] = useState(null)
    useEffect(() => {
        const checkPermission = async () => {
            const result = await authService(document.cookie)
            setPermit(result)
        }
        checkPermission()
    }, [])
    return permit
}

组件内使用方式：

import { useAuth } from '../hooks/useAuth'

// 组件内直接获取权限状态
const permit = useAuth()

内容的提问来源于stack exchange，提问作者xmuhs