Laravel 11 + Inertia.js 应用语言环境设置失效问题排查

问题现象 #

通过dd(App::currentLocale())查看后端语言环境值正确，但前端$page.props.locale始终固定为'en'，导致语言选择器持续显示英文国旗。

可能原因及解决方法 #

1. 中间件执行顺序错误 #

语言设置中间件若在HandleInertiaRequests之后执行，会导致share方法获取的是默认语言，而非Session中存储的目标语言。

解决方法：
修改bootstrap/app.php，确保语言中间件在HandleInertiaRequests之前注册：

->withMiddleware(function (Middleware $middleware) {
    // 先注册语言中间件
    $middleware->append(\App\Http\Middleware\LocaleMiddleware::class);
    // 确保HandleInertiaRequests在语言中间件之后执行
    $middleware->web(append: [
        \App\Http\Middleware\HandleInertiaRequests::class,
    ]);
})

2. 前端未同步后端共享的locale值 #

当前前端仅在初始化时读取Cookie设置locale，但语言切换后，Inertia页面更新时未同步更新前端i18n实例的语言配置。

解决方法：
在Inertia的resolveComponent钩子中监听locale变化，实时更新i18n：

createInertiaApp({
  resolve: (name) => {
    const page = require(`./Pages/${name}`).default;
    // 同步后端共享的locale到前端i18n
    if (page.props?.locale) {
      const newLocale = page.props.locale;
      if (i18n.global.locale !== newLocale) {
        i18n.global.locale = newLocale;
        loadLocaleMessages(i18n, newLocale);
      }
    }
    return page;
  },
  // 其他配置项...
});

3. 语言中间件的Cookie设置逻辑冲突 #

中间件中Cookie赋值逻辑仅在Session存在language时使用对应值，首次访问或Session失效时默认设为'lv'，但后端默认语言可能为'en'，导致前后端语言环境不一致。

解决方法：
统一语言优先级：Session > Cookie > 框架默认语言，修改中间件代码：

public function handle(Request $request, Closure $next)
{
    // 按优先级确定当前语言
    $locale = Session::get('language', 
        $request->cookie('language', config('app.locale'))
    );
    
    App::setLocale($locale);

    return $next($request)
        ->withCookie(
            cookie()->forever(
                'language',
                $locale,
                null,
                null,
                null,
                false
            )
        );
}

4. 前端语言选择器的条件判断冗余 #

当前前端模板使用两个独立的v-if，可能出现逻辑漏洞，比如当locale值异常时两张图片都不显示，或因判断逻辑重复导致显示错误。

解决方法：
改用v-if+v-else简化判断逻辑：

<div class="flex items-center"> 
   <img v-if="$page.props.locale === 'en'" src="../../images/icons/english.png" :alt="$t('locales.en')" height="25px" width="25px">
   <img v-else src="../../images/icons/latvian.png" :alt="$t('locales.lv')" height="25px" width="25px">
</div>

5. 控制器重定向方式的潜在问题 #

使用Inertia::location(url()->previous())会触发全页面刷新，可能导致Session未及时被中间件读取。

解决方法：
改用Laravel原生重定向方法，同时直接设置Cookie：

public function setLanguage(string $lang)
{
    Session::put('language', $lang);

    return back()->withCookie(
        cookie()->forever('language', $lang)
    );
}

验证步骤 #

1. 切换语言后，查看浏览器Cookie中的language值是否与选择的语言一致
2. 在HandleInertiaRequests的share方法中添加dd($locale)，确认共享给前端的locale值正确
3. 前端控制台执行console.log($page.props.locale)，检查实际获取到的语言值

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