如何禁用Nuxt/Auth本地策略下浏览器重启自动登录？

你猜的完全没错！Nuxt/Auth的Local策略默认确实会把JWT Token存储在localStorage中——这是一种持久化存储，只要token没过期，就算关闭浏览器再打开，它依然会存在，这就是自动登录的原因。而你看到的Session类型Cookie，是模块用来做一些辅助验证的，但核心的token持久化还是依赖localStorage。

要实现「关闭浏览器后Token立即失效」的需求，我们需要把Token的存储方式从localStorage改成Session Cookie（会话Cookie，浏览器关闭时会自动被清除），具体步骤如下：

1. 修改Nuxt/Auth的策略配置 #

在你的nuxt.config.js文件中，找到auth模块的配置，调整Local策略的storage选项为cookie，并配置Cookie的相关参数：

export default {
  // ...其他配置
  auth: {
    strategies: {
      local: {
        token: {
          property: 'token', // 根据你的后端返回的token字段名调整
          global: true,
          // 关键：把存储方式改成cookie
          storage: 'cookie',
          // 配置Cookie为Session类型（关闭浏览器即失效）
          cookie: {
            name: 'auth_token',
            // 设置为false表示不设置过期时间，即为Session Cookie
            expires: false,
            path: '/',
            secure: process.env.NODE_ENV === 'production', // 生产环境建议开启secure
            httpOnly: true, // 开启httpOnly提升安全性，防止XSS攻击
            sameSite: 'lax'
          }
        },
        user: {
          property: 'user', // 后端返回的用户信息字段名
          autoFetch: true
        },
        endpoints: {
          login: { url: '/api/auth/login', method: 'post' },
          logout: { url: '/api/auth/logout', method: 'post' },
          user: { url: '/api/auth/user', method: 'get' }
        }
      }
    }
  }
}

2. 清理旧的LocalStorage数据 #

因为之前的登录操作已经把Token存在了localStorage里，为了避免新旧存储方式冲突，你需要清除掉旧的localStorage中的Auth相关数据。可以通过以下方式实现：

• 在项目的plugins目录下创建一个插件文件（比如clear-old-auth-data.js），内容如下：

export default function ({ app }) {
  // 清除localStorage中的auth token
  if (process.client) {
    localStorage.removeItem('auth._token.local')
  }
}

• 然后在nuxt.config.js的plugins数组中注册这个插件：

plugins: [
  // ...其他插件
  { src: '~/plugins/clear-old-auth-data.js', mode: 'client' }
]

3. 验证效果 #

完成配置后，重新启动项目并登录：

• 打开浏览器的开发者工具，查看「Application」标签下的「Cookies」，你会看到名为auth_token的Cookie，且没有过期时间（显示为Session）
• 关闭浏览器后重新打开，此时Cookie已被清除，系统不会自动登录，需要重新输入账号密码

这样就完美实现了「关闭浏览器后Token立即失效」的需求啦！

内容的提问来源于stack exchange，提问作者Carlos Sosa