连接NextJS前端和laravel后端

Question

我正在使用nextjs前端连接具有rest api的laravel后端。我在验证路由时遇到问题。在登录时，响应包含jwt令牌，我将其存储在localStorage中。公共api运行良好，但受保护的api不起作用，因为我无法在头中提供jwt。我正在使用axios进行请求和react查询。

api.js`

import axios from "axios";
if(typeof window !== "undefined"){
var token = localStorage.getItem("token");
}
const api = axios.create({
baseURL: "http://<server ip address>:8000/api/v1/",
headers: {
"Authorization": `Bearer ${token}`
}
});
export default api;

`请求

const {data, isLoading, isError, error, isSuccess} = useQuery("user", getUser);

getUser

import api from "@api/index";
const getUser = async () => {
try {
const res = await api.get("user/me");
return {status: res.status, data: res.data};
} catch (error) {
if(error.response && error.response.data.message){
return {status: error.response.status, message: error.response.data.message};
}else{
return {message: error.message};
}
}
}
export default getUser;

当我查看网络标签时，我得到了授权："；Bearer null"；在请求标头中。有没有办法这样做。提前谢谢。

我认为获取令牌时出错，所以我有条件地向localStorage进行了查询。你可以在api.js中看到。但它仍然为null。

Answer 1

我找到了一种方法：

现在我在cookies-nextnpm包的帮助下将令牌存储在cookie中您也可以在没有此软件包的情况下进行操作

由于它存储在cookie中，我可以从context.req.cookies.cookie_name访问getServerSideProps内部的内容，或者如果您也要使用cookies-next，则可以使用getCookie("cookie_name", {context.req, context.res})。

：)