Laravel 9与Next.js中Token存储及身份验证实现方法

一、Token存储方案 #

Next.js中常用两种存储方式，根据你的渲染需求选择：

• localStorage：适合纯客户端渲染场景，操作简单
• Cookies：安全性更高，支持服务器端渲染（SSR），推荐用于需要SSR的项目

二、登录时保存Token #

修改你的Next.js登录函数，在请求成功后将后端返回的Token存入对应存储：

1. 使用localStorage #

const login = async ({ ...props }) => {
  try {
    const result = await Axios.post("http://localhost:8000/api/login", props);
    // 保存Token到localStorage
    localStorage.setItem("auth_token", result.data.token);
    mutate(); // 触发SWR重新拉取用户信息
    console.log("登录成功");
  } catch (error) {
    if (error.response.status !== 422) throw error;
  }
};

2. 使用Cookies（需安装js-cookie） #

先安装依赖：

npm install js-cookie

修改登录函数：

import Cookies from 'js-cookie';

const login = async ({ ...props }) => {
  try {
    const result = await Axios.post("http://localhost:8000/api/login", props);
    // 存储Token到Cookies，设置7天过期时间
    Cookies.set("auth_token", result.data.token, { expires: 7 });
    mutate();
    console.log("登录成功");
  } catch (error) {
    if (error.response.status !== 422) throw error;
  }
};

三、请求自动携带Token #

创建Axios全局实例并配置拦截器，让所有请求自动带上Authorization头：

在utils/axios.js中创建实例：

import axios from 'axios';
import Cookies from 'js-cookie'; // 用localStorage则替换为localStorage

const api = axios.create({
  baseURL: 'http://localhost:8000/api',
});

// 请求拦截器：添加Token到请求头
api.interceptors.request.use((config) => {
  const token = Cookies.get("auth_token") || localStorage.getItem("auth_token");
  if (token) {
    config.headers.Authorization = token;
  }
  return config;
});

// 响应拦截器：处理Token失效
api.interceptors.response.use(
  (res) => res,
  (error) => {
    if (error.response?.status === 401) {
      // Token过期/无效，清除存储并跳转登录页
      Cookies.remove("auth_token");
      localStorage.removeItem("auth_token");
      window.location.href = '/login';
    }
    return Promise.reject(error);
  }
);

export default api;

然后修改你的useSWR请求代码，使用这个实例：

import api from '../utils/axios';
import { useSWR } from 'swr';
import { useRouter } from 'next/router';

// ...

const router = useRouter();
const { data: user, error, mutate } = useSWR('/user', () =>
  api.get('/user')
    .then(res => res.data)
    .catch(error => {
      if (error.response.status !== 409) throw error;
      router.push('/verify-email');
    }),
);

四、Laravel Sanctum跨域配置 #

确保Laravel端配置正确，避免跨域问题：

1. 修改config/sanctum.php，将Next.js域名加入stateful数组：

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', 'localhost,localhost:3000,127.0.0.1,127.0.0.1:8000,::1')),

2. 在.env文件中设置：

SESSION_DOMAIN=localhost
SANCTUM_STATEFUL_DOMAINS=localhost:3000

五、登出功能实现 #

添加登出函数，清除存储的Token并重置用户状态：

const logout = () => {
  // 清除Token
  Cookies.remove("auth_token");
  localStorage.removeItem("auth_token");
  // 清空SWR缓存的用户数据
  mutate(null);
  // 跳转登录页
  window.location.href = '/login';
};

内容的提问来源于stack exchange，提问作者Muhammad Mushfiqur Rahman