我正在尝试从我的 Vue3 客户端(使用
GET
JavaScript HTTP 客户端)向 FastAPI 服务器发出
axios
请求,但我收到
422 unprocessable entity
错误响应。据我了解,这种错误消息与错误的输入有关。
这是 vue3 代码:
import { authToken } from "../main.js"
export default {
...
mounted() {
const response = axios.get('/checkIsLogged', authToken);
console.log("authToken" + authToken)
this.isLoggedIn = response
console.log("isLoggedin", response)
if (response) {
this.title3 = "Mi perfil"
} else {
this.title1 = "Sign in"
}
},
其中“authToken”:
export const authToken = ""
export const setAuthToken = (token) => {
authToken = token
}
另一方面,在 FastAPI 后端中,端点如下所示:
@empresa.get("/checkIsLogged", response_model=bool)
def is_token_expired(authToken: str):
try:
payload = jwt.decode(authToken, SECRET_KEY, algorithms=[ALGORITHM])
expiration_timestamp = payload.get("exp")
if expiration_timestamp is None:
return True
expiration_datetime = datetime.fromtimestamp(expiration_timestamp)
current_datetime = datetime.now()
if current_datetime >= expiration_datetime:
return True
return False
except JWTError:
return False
我做错了什么?
提前致谢。
该问题源于尚未在 GET 请求中正确传递
authToken
至 FastAPI 后端。应在 Axios GET 请求的标头或查询参数中发送
authToken
。
以下是修正后的代码以及一些说明:
1. 通过标头发送
authToken
(推荐):
```javascript import { authToken } from "../main.js"
export default {
...
mounted() {
axios.get('/checkIsLogged', {
headers: {
'Authorization':
Bearer ${authToken}
}
})
.then(response => {
console.log("authToken:", authToken);
this.isLoggedIn = response.data;
console.log("isLoggedIn:", this.isLoggedIn);
if (this.isLoggedIn) {
this.title3 = "Mi perfil";
} else {
this.title1 = "Sign in";
}
})
.catch(error => {
console.error("Error checking login status:", error);
});
},
}
```
-
我们在 Axios 请求中添加了一个
headers
对象,其中包含Authorization
标头。 -
Bearer ${authToken}
是将authToken
作为 Bearer 令牌发送的标准方式。 -
请确保 FastAPI 端点中也处理了
Authorization
标头以提取令牌。
2. 通过查询参数发送
authToken
:
```javascript import { authToken } from "../main.js"
export default {
...
mounted() {
axios.get(
/checkIsLogged?authToken=${authToken}
)
.then(response => {
// ... (处理响应的代码与上述相同)
})
.catch(error => {
// ... (错误处理代码与上述相同)
});
},
}
```
-
此方法将
authToken
作为查询参数附加到 URL。 -
在的 FastAPI 端点中,需要从查询参数中读取
authToken
:python @empresa.get("/checkIsLogged", response_model=bool) def is_token_expired(authToken: str = Query(None)): # 从查询参数获取 authToken # ... (其余代码保持不变)
其他提示:
-
确保
authToken
在main.js
和的 Vue 组件中都正确设置和更新。 -
使用
console.log
语句在的客户端和服务器代码中调试authToken
的值。 - 检查的浏览器开发工具中的“网络”选项卡,以查看发送到服务器的请求和从服务器接收到的响应。
通过在 Axios 请求中正确传递
authToken
并确保的 FastAPI 后端能够读取它,应该能够解决 422 错误并成功验证的用户。