Nuxt 3集成Azure Active Directory B2C时出现non_browser_environment错误

错误原因分析 #

• 终端 non_browser_environment 错误：Nuxt 3 默认启用服务端渲染（SSR），你的认证代码会在服务端执行，但 @azure/msal-browser 是专为浏览器环境设计的库，服务端缺少 window、sessionStorage 等浏览器专属API，因此触发该错误。
• 浏览器 startPerformanceMeasurement 错误：服务端初始化的 msal 实例被带到客户端后，出现状态不一致，导致内部方法调用失败。

解决步骤 #

1. 限制代码仅在浏览器环境执行 #

利用 Nuxt 3 提供的 process.client 标识，确保所有 msal 相关逻辑只在浏览器端运行，避免服务端执行引发的环境不兼容问题。

2. 修正 useAuth 组合式函数 #

修改 /composables/useAuth.js，调整实例初始化时机和逻辑：

import * as msal from '@azure/msal-browser'

let applicationInstance = null;

export const useAuth = () => {
    // 仅在浏览器环境初始化msal实例，且保证单例
    if (process.client && !applicationInstance) {
        const msalConfig = {
            auth: {
                clientId: '你的Azure AD B2C客户端ID',
                authority: '你的B2C Authority地址（如https://xxx.b2clogin.com/xxx.onmicrosoft.com/B2C_1_signup_signin）',
                knownAuthorities: ['你的B2C域名（如xxx.b2clogin.com）'],
                redirectUri: window.location.origin // 或指定的跳转地址
            },
            cache: {
                cacheLocation: "sessionStorage",
                storeAuthStateInCookie: false,
            },
        }
        applicationInstance = new msal.PublicClientApplication(msalConfig);
    }

    const signIn = async () => {
        if (!process.client) return;

        applicationInstance.addEventCallback(event => {
            if (event.type === "msal:loginSuccess" && event.payload.account) {
                const account = event.payload.account;
                applicationInstance.setActiveAccount(account);
                console.log(account);
            }
        });

        try {
            await applicationInstance.handleRedirectPromise();
            const activeAccount = applicationInstance.getActiveAccount();
            if (!activeAccount) {
                const requestParams = {
                    scopes: ['openid', 'offline_access', 'User.Read'],
                };
                await applicationInstance.loginRedirect(requestParams);
            }
        } catch (err) {
            console.error('认证流程出错:', err);
        }
    };

    return {
        signIn
    }
}

注意：移除了原配置中重复的 knownAuthorities 字段，避免配置冲突。

3. 调整页面调用逻辑 #

在 index.vue 中，确保登录逻辑仅在客户端触发：

<script setup>
const auth = useAuth();

if (process.client) {
    auth.signIn();
}
</script>

4. 额外优化建议 #

• 将敏感配置（如 clientId、authority）存入 Nuxt 环境变量，通过 useRuntimeConfig() 获取，示例：

  const config = useRuntimeConfig();
  // 在msalConfig中使用：clientId: config.public.azureClientId
  

• 若需在服务端获取认证状态，可通过 server/api 接口结合 cookie 传递认证信息，实现服务端的权限校验。

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