启用auth中间件后Nuxt中v-icon不显示问题排查求助

未启用auth中间件时，<v-icon>能正常渲染mdi-close图标，但启用中间件后图标消失。相关代码如下：

模板代码：

<v-icon>{{'mdi-close'}}</v-icon>

页面脚本配置：

middleware: ['auth'],

auth中间件文件（middleware/auth.js）：

export default function({store, redirect}){
    if (!store.getters.hasToken) {
        redirect('/login')
    }
}

排查与解决方案 #

1. 验证中间件跳转逻辑是否符合预期
   在auth中间件中添加日志，确认hasToken的实际值：

   export default function({store, redirect}){
       console.log('hasToken:', store.getters.hasToken)
       if (!store.getters.hasToken) {
           redirect('/login')
       }
   }
   

   如果日志显示hasToken为false，说明中间件正常触发跳转，图标不显示是因为页面已跳转到登录页（无该图标）；如果hasToken为true但仍出现问题，继续排查。

2. 处理store状态初始化的异步问题
   如果你的token是通过异步请求获取的（比如页面加载时从localStorage读取或接口请求），中间件执行时store状态可能未初始化完成，导致误判。可以修改中间件等待状态初始化：

   export default async function({store, redirect}){
       // 假设你有初始化auth状态的action
       await store.dispatch('auth/initToken')
       if (!store.getters.hasToken) {
           redirect('/login')
       }
   }
   

3. 调整v-icon的使用方式
   避免插值语法可能带来的渲染问题，改用静态写法或绑定图标对象：

   <!-- 静态写法 -->
   <v-icon>mdi-close</v-icon>
   <!-- 自动导入图标时的绑定写法（需配置自动导入） -->
   <v-icon :icon="mdiClose"></v-icon>
   

4. 检查样式是否被覆盖
   打开浏览器开发者工具，查看v-icon元素的样式：

   • 确认font-family包含Material Design Icons
   • 确认元素的content属性正确对应mdi-close的Unicode值
     如果样式异常，检查是否有全局样式或中间件关联的样式导致冲突。

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