在Nuxt 3中配置Pinia持久化存储的Cookie Domain实现SSO

要让同一主域名下的多个子域名应用共享Pinia持久化的登录状态Cookie，核心是在Pinia的持久化配置中明确指定Cookie的domain属性，同时配合合理的安全配置。

步骤1：修改Pinia Store的持久化配置 #

在你的auth store的persist选项中，添加cookieOptions配置项，指定domain为.主域名（前缀的点是关键，确保所有子域名都能访问该Cookie）。同时可补充path、secure、sameSite等选项保障安全性。

修改后的完整代码如下：

import { defineStore } from "pinia";
import { persistedState } from "pinia-plugin-persistedstate"; // 确保已引入该插件

export const useAuthStore = defineStore(
  "auth",
  () => {
    const loggedUser = ref("");
    const hasPin = ref(false);
    const language = ref(window?.navigator?.language);
    const isLoggedIn = computed(() => !!loggedUser.value);
    const refresh_token = computed(() => loggedUser?.value?.jwToken);
    const access_token = computed(() => loggedUser?.value?.jwToken);
    const roles = computed(() => loggedUser?.value?.roles);
    const userId = computed(() => loggedUser?.value?.id);
    const businessId = computed(() => loggedUser?.value?.businessId);
    const userInfo = computed(() => loggedUser?.value);

    function setLoggedUser(data) {
      loggedUser.value = data;
    }

    function setHasPin(data) {
      hasPin.value = data;
    }

    function setAccessToken(value) {
      let userInfo = { ...loggedUser?.value, access_token: value };
      setLoggedUser(userInfo);
    }
    function setRefreshToken(value) {
      let userInfo = { ...loggedUser?.value, refresh_token: value };
      setLoggedUser(userInfo);
    }
    function updateUser(value) {
      let userInfo = { ...loggedUser?.value, fullName: value };
      setLoggedUser(userInfo);
    }
    function updateAccountType(value) {
      let userInfo = { ...loggedUser?.value, accountType: value };
      setLoggedUser(userInfo);
    }
    function updateUserInfo(data) {
      let userInfo = { ...loggedUser?.value, ...data };
      setLoggedUser(userInfo);
    }

    const logOut = () => {
      const authCookie = useCookie('auth')
      localStorage.clear();
      authCookie.value = null
      window.location.href = "/auth/login";
    };
    return {
      updateUser,
      isLoggedIn,
      refresh_token,
      access_token,
      roles,
      userId,
      userInfo,
      setRefreshToken,
      setAccessToken,
      updateAccountType,
      updateUserInfo,
      setLoggedUser,
      logOut,
      loggedUser,
      businessId,
      language,
      setHasPin,
      hasPin,
    };
  },
  {
    persist: {
      storage: persistedState.cookies,
      cookieOptions: {
        domain: '.your-main-domain.com', // 替换为你的主域名，比如.example.com
        path: '/', // 确保整个域名路径都能访问Cookie
        secure: process.env.NODE_ENV === 'production', // 生产环境HTTPS下必须设为true
        sameSite: 'lax', // 平衡安全性与跨域可用性，可按需改为'strict'或'none'
        maxAge: 3600 * 24 * 7 // Cookie有效期，可选设置为7天
      }
    },
  }
);

关键注意事项 #

• 域名格式：domain必须设置为.主域名，比如子域名是app1.example.com和app2.example.com，主域名就填.example.com，这样两个子域名都能读取该Cookie。
• HTTPS适配：生产环境使用HTTPS时，secure必须设为true，否则Cookie无法在HTTPS环境中传递。
• SameSite配置：若需要跨子域名的API请求，sameSite建议设为lax；若涉及跨站请求，可设为none但必须配合secure: true。
• 开发环境兼容：本地localhost开发时无需设置domain，可通过环境变量判断自动适配：

  domain: process.env.NODE_ENV === 'production' ? '.your-main-domain.com' : undefined
  

• 插件依赖：需确保已正确安装并注册pinia-plugin-persistedstate插件，否则持久化配置不会生效。

内容的提问来源于stack exchange，提问作者Success Ahon