连接 NextJS 前端和 laravel 后端答案

【问题标题】：Connecting NextJS frontend with laravel backend连接 NextJS 前端和 laravel 后端
【发布时间】：2023-01-30 20:26:37
【问题描述】：

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

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);

获取用户

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 中看到。但它仍然是空的。

【问题讨论】：

您应该尝试使用 InertiaJS，因为它是 js 服务器端渲染的标准，而且 laravel 集成的文档很棒！
@dz0nika 嘿，感谢您的互动，但我不能真正使用其他框架，因为这是客户的要求。请与可以提供帮助的人分享...

标签： php laravel authentication next.js

【解决方案1】：

我找到了一个方法：

现在我在 cookies-next npm 包的帮助下将令牌存储在 cookie 中。你也可以不用这个包

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

【讨论】：