在SSR模式的Nuxt应用中间件中能否调用localStorage？

你当前的代码存在几个明显的问题，无法直接正常运行：

• 首先你没有给中间件函数加async关键字，但内部用了await调用接口，语法错误会直接导致运行失败
• Nuxt中间件默认会在服务端和客户端都执行（SSR模式下），而服务端不存在localStorage对象，直接调用会抛出错误，另外你代码里的local.storage是拼写错误，正确写法是localStorage
• 你把localStorage存储逻辑写在了redirect之后，触发重定向后当前页面的后续JS逻辑不会执行，存储操作永远不会生效
• 你当前的存储逻辑是把token作为键、时间戳作为值存入，后续你要读取这个token的时候无法直接获取，逻辑写反了，正常应该是固定键名，把token作为值存储

修正后的可行代码示例（Nuxt2） #

async middleware(context) {
    const token = context.route.query.token;

    if (!token) {
        const result = await context.$api.campaignNewShare.createNewShare();
        const newToken = result.data.token;
        // 仅在客户端环境操作localStorage
        if (process.client) {
            localStorage.setItem('campaign_share_token', newToken);
            // 如果你确实需要存token对应的生成时间，可以额外存一条
            localStorage.setItem('campaign_share_token_time', new Date().getTime());
        }
        // 存储完成后再执行重定向
        context.redirect({'name': 'campaigns-new', 'query': {token: newToken}});
    }
}

• 如果你存储的是用户身份凭证类的高权限token，不建议存在localStorage：localStorage容易被XSS攻击窃取，这类高权限token优先使用带HttpOnly、Secure、SameSite属性的Cookie存储，前端JS无法读取，安全性更高
• 如果你存储的是当前场景下的临时活动分享token、仅用于标识分享来源、无高权限，那存在localStorage是完全可以的，风险很低
• 额外注意不要把敏感信息（比如用户手机号、身份证号、登录密码等）存在localStorage里，所有本地存储的内容都是明文可见的

内容的提问来源于stack exchange，提问作者Čamo