Nuxt3中如何从服务端移除localStorage内的accessToken与idToken？

首先要明确：服务端无法直接操作客户端的localStorage，因为localStorage是浏览器专属的本地存储，服务端没有访问权限。正确的登出逻辑应该是「服务端先失效用户会话/令牌，再通知客户端清除本地存储的令牌」，双管齐下保证会话失效的安全性和用户体验。

具体实现步骤 #

1. 编写服务端登出接口（Nuxt3 Server API）

先在服务端处理令牌失效逻辑，确保即使客户端没删令牌，它也无法再使用。创建server/api/logout.ts文件：

export default defineEventHandler(async (event) => {
  // 从请求头获取当前用户的accessToken（如果你的请求是带token的）
  const authHeader = getRequestHeader(event, 'Authorization');
  const accessToken = authHeader?.split('Bearer ')[1];

  if (accessToken) {
    // 这里调用你的认证服务逻辑，比如把令牌加入黑名单、从缓存中移除
    // 示例：await tokenBlacklist.add(accessToken, { expiresIn: '1h' });
  }

  // 如果你的项目用cookie存储会话标识，也可以在这里清除cookie
  setCookie(event, 'session_id', '', { 
    expires: new Date(0),
    path: '/'
  });

  return { success: true, message: '会话已失效' };
});

2. 编写通用的登出函数（支持服务端+客户端）

在Nuxt3中可以创建一个composable或者直接在页面/组件中编写登出函数，区分服务端和客户端逻辑：

const logout = async () => {
  // 服务端：调用登出接口失效令牌
  if (process.server) {
    await $fetch('/api/logout', {
      method: 'POST',
      headers: {
        Authorization: `Bearer ${useCookie('accessToken').value}` // 如果用cookie存了token的话
      }
    });
  }

  // 客户端：清除localStorage中的令牌并跳转登录页
  if (process.client) {
    localStorage.removeItem('accessToken');
    localStorage.removeItem('idToken');
    navigateTo('/login');
  }
};

3. 关键注意事项

• 服务端失效令牌是核心：即使客户端因为某些原因没清除localStorage里的令牌，服务端已经标记该令牌无效，后续请求会被拒绝，保证安全性。
• 避免直接在服务端操作localStorage：Nuxt3中process.server环境下访问localStorage必然报错，必须通过process.client判断后在客户端执行删除操作。
• 可选：用Cookie替代LocalStorage存令牌：如果把令牌存在HttpOnly Cookie中，服务端可以直接清除Cookie，更安全（避免XSS窃取令牌），客户端无需操作localStorage，登出时服务端清除Cookie即可。

内容的提问来源于stack exchange，提问作者Alan Ari