nextjs：可以在不刷新的情况下获取客户侧cookie

Question

用户登录时，我将cookie设置为js-cookie用于客户端访问。

cookie必须是-i思考 - 客户可以访问，因为我使用 redux thunk请求 s。

export async function apiLogin({ email, password }) {
  const data = JSON.stringify({
    email,
    password,
  });

  const config = {
    method: 'post',
    url: `${process.env.API_URL}/auth/login`,
    headers: {
      'Content-Type': 'application/json',
    },
    data,
  };

  const response = await axios(config);

  if (response.status === 200 && response.data) {
    const encodedUser = Buffer.from(JSON.stringify(response.data.user)).toString('base64');

    Cookies.set('token', response.data.token, { expires: 1 });
    Cookies.set('user', encodedUser, { expires: 1 });
    return { user: response.data.user, token: response.data.token };
  }
  if (response.status === 401) {
    return { error: 'User/pw incorrect' };
  }
  return { error: 'Error' };
} 

登录时正确设置了这些cookie-我可以在开发工具中的“应用程序”选项卡中看到它们。

但是，这些cookie无法访问我的未来请求：

import Cookies from 'js-cookie';

const cookieToken = Cookies.get('token') // this is throws null unless I refresh

export const axiosInstance = (token = cookieToken) => axios.create({
  baseURL: process.env.API_URL,
  headers: {
    Accept: 'application/json',
    Authorization: `Bearer ${token}`,
  },
});

示例请求：

  browse(params = {}, hook = null) {
    return axiosInstance()
      .get(endpoint, { params })
      .then((response) => {
        const { data } = response;
        if (hook) {
          data.items = data.items.map((item) => hook(item));
        }
        return data;
      })
      .catch((error) => console.error('error', error));
  },

cookie getter方法正常工作，但前提是我刷新页面。所以我认为这不是问题。

编辑：不是axios问题，我对本机fetch api做了相同的操作，但仍然无法获得cookie。我还尝试在localstorage中保存令牌，结果相同。

EDIT2：

我忘了提到我有一个_MiddleWare.js文件，仅在存在令牌时才为路由添加保护，这可以正常工作，因此我猜该服务器端可访问该令牌：

export function middleware(req) {
  const userSession = req.headers.get('cookie');
  const url = req.nextUrl.clone();

  if (userSession?.includes('token')) {
    console.log(userSession); // token is there!
    if (req.nextUrl.pathname === '/login') {
      url.pathname = '/';

      return NextResponse.redirect(url);
    }
    return NextResponse.next();
  }

  url.pathname = '/login';
  return NextResponse.rewrite(url);
}

Answer 1

好的，损失了很多时间修复此操作，这让您感到有些尴尬，但是显然，设置了一个cookie令牌，> soken 不起作用，在尝试了其他几种方法之后，它看起来就是简单地命名它cookietoken做了这项工作。 lmao。