Vue.js路由权限校验后重定向前短暂显示404错误的问题排查

你的guard函数依赖异步的Axios请求来校验用户状态，但Vue Router的beforeEnter钩子本身不会让Nuxt等待异步操作完成再继续路由处理。在Axios请求还未返回结果时，Nuxt会尝试继续解析路由，此时因为没有即时的next()指令，路由系统会暂时认为当前路由无法匹配，从而短暂渲染404页面，直到异步请求完成后执行重定向逻辑。

另外，你提到的localStorage无法在服务端生效是正确的——Nuxt的服务端渲染阶段没有浏览器的localStorage对象，所以必须通过API校验服务端的会话状态，这个思路是对的。

Nuxt提供的路由中间件专门用于处理这种路由前置的异步逻辑，它会等待中间件中的异步操作完成后，再继续路由的解析和页面渲染，从根本上避免404闪现的问题。

步骤1：创建认证中间件 #

在项目的middleware目录下新建auth.js文件（如果没有middleware目录就新建一个），写入以下代码：

export default async function ({ route, redirect, $axios }) {
  // 利用Nuxt内置的$axios实例，避免重复配置
  const authResponse = await $axios.get(process.env.apiUrl + 'check-auth');
  
  // 校验管理员权限
  if (route.matched.some(record => record.meta.requiresAdmin)) {
    if (authResponse.data.is_moderator !== 1) {
      return redirect('/');
    }
  } 
  // 校验普通登录权限
  else if (route.matched.some(record => record.meta.requiresAuth)) {
    if (!authResponse.data.id) {
      return redirect({ 
        path: '/login', 
        params: { nextUrl: route.fullPath } 
      });
    }
  }
  
  // 权限校验通过，继续路由
}

步骤2：在路由中使用中间件 #

修改你的router.js配置，把原来的beforeEnter替换为middleware字段：

{ 
  path: '/question/:id/comments', 
  name: 'comments', 
  component: page('Comments.vue'), 
  meta: {requiresAuth: true},
  middleware: 'auth' // 使用刚才创建的认证中间件
}

进阶优化：用Vuex缓存认证状态 #

如果每次路由跳转都调用API校验会浪费资源，你可以结合Vuex缓存用户的认证状态，减少重复请求：

1. 新建store/auth.js管理认证状态：

export const state = () => ({
  userInfo: null,
  isAuthenticated: false,
  isAdmin: false
});

export const mutations = {
  SET_AUTH_STATE(state, userData) {
    state.userInfo = userData;
    state.isAuthenticated = !!userData.id;
    state.isAdmin = userData.is_moderator === 1;
  }
};

export const actions = {
  async fetchAuthState({ commit }) {
    const response = await this.$axios.get(process.env.apiUrl + 'check-auth');
    commit('SET_AUTH_STATE', response.data);
    return response.data;
  }
};

2. 修改中间件，优先读取Vuex缓存：

export default async function ({ route, redirect, store }) {
  // 如果Vuex中没有缓存的认证状态，再请求API
  if (!store.state.auth.userInfo) {
    await store.dispatch('auth/fetchAuthState');
  }

  const { isAuthenticated, isAdmin } = store.state.auth;

  if (route.matched.some(record => record.meta.requiresAdmin)) {
    if (!isAdmin) return redirect('/');
  } else if (route.matched.some(record => record.meta.requiresAuth)) {
    if (!isAuthenticated) {
      return redirect({ path: '/login', params: { nextUrl: route.fullPath } });
    }
  }
}

这样既解决了404闪现的问题，还提升了应用的性能，避免重复的API请求。

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