Vue-Router权限校验报错及currentUser初始为null问题求助

问题描述 #

我编写了获取登录用户详情并检查teams数组权限的函数，目前遇到两个问题：

1. 运行时出现报错（见下方截图）
2. UI加载完成后currentUser显示为null，必须点击任意组件后才会正常显示

相关代码 #

Vue Store 代码 #

state(){
  return { currentUser: null } // 注：原代码缺失大括号，已修正语法错误
},
mutations: {
  setCurrentUser(state, payload) {
    // console.log("set current user", payload);
    state.currentUser = payload;
  }
},
actions: {
  loadCurrentUser(context, data) {
    // console.log("loadcurrentuser");
    return new Promise((resolve, reject) => {
      axiosService({ requiresAuth: true })
        .get(`/administration/users/${data.id}`)
        .then(response => {
          context.commit("setCurrentUser", response.data);
          resolve(response.data);
        })
        .catch(error => reject(error));
    });
  }
},
getters: {
  isCurrentUser(state){
    return state.currentUser;
  }
}

router.js 代码 #

{
  path: "/administration",
  name: "Administration",
  component: PageAdministration,
  meta: {
    requiresAuth: true,
    neededPermissions: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
  },
}

function authorizeUser(to, from, next) {
  let isAllowed = true;
  const currentUser = store.getters["auth/isCurrentUser"];
  console.log(currentUser);

  for(let i = 0;i<currentUser.teams.length;i++){
    const team = currentUser.teams[i]
    const validPermissions = team.permissions.filter((item) => { return to.meta.neededPermissions.includes(item.permissionType); });
    const mappedValidPermissions = validPermissions.map((item) => { return item.permissionType; });
    if (!to.meta.neededPermissions.every(i=>mappedValidPermissions.includes(i))) {
      isAllowed = false;
      next({ path: "/:notFound(.*)" });    
      break;
    } 
  }

  if(isAllowed) next();
}


router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.getters["auth/isLoggedIn"]) {
    next({
      name: "Authentication",
      params: {
        desiredRoute: to.fullPath,
      },
    });
  } else {
    authorizeUser(to, from, next) // 注：原代码漏传from参数，已修正
  }
});

报错截图 #

问题分析与修复方案 #

1. 权限检查报错修复 #

报错原因是路由守卫执行时，currentUser还未完成加载（仍为null），直接访问currentUser.teams触发了Cannot read properties of null错误。

修改后的权限校验逻辑：

async function authorizeUser(to, from, next) {
  let currentUser = store.getters["auth/isCurrentUser"];
  
  // 若用户已登录但currentUser未加载，先请求用户数据
  if (!currentUser && store.getters["auth/isLoggedIn"]) {
    const userId = store.getters["auth/getUserId"]; // 替换为你实际获取用户ID的方式
    try {
      currentUser = await store.dispatch("auth/loadCurrentUser", { id: userId });
    } catch (err) {
      return next({ name: "Authentication" });
    }
  }

  // 无有效用户数据则跳转登录页
  if (!currentUser) return next({ name: "Authentication" });

  let isAllowed = false;
  // 遍历用户团队，只要有一个团队满足所有权限要求就允许访问
  for (const team of currentUser.teams) {
    const mappedPermissions = team.permissions.map(item => item.permissionType);
    if (to.meta.neededPermissions.every(perm => mappedPermissions.includes(perm))) {
      isAllowed = true;
      break;
    }
  }

  isAllowed ? next() : next({ path: "/:notFound(.*)" });
}

router.beforeEach(async (to, from, next) => {
  if (to.meta.requiresAuth && !store.getters["auth/isLoggedIn"]) {
    return next({
      name: "Authentication",
      params: { desiredRoute: to.fullPath }
    });
  }

  // 仅对需要权限校验的路由执行逻辑
  if (to.meta.neededPermissions) {
    await authorizeUser(to, from, next);
  } else {
    next();
  }
});

2. currentUser显示延迟修复 #

UI加载后currentUser为null的问题，主要是用户数据加载时机过晚，以及组件未响应式监听currentUser变化。

修复步骤：

• 在App初始化时（如App.vue的created钩子）提前加载用户数据：

created() {
  if (this.$store.getters["auth/isLoggedIn"]) {
    const userId = this.$store.getters["auth/getUserId"];
    this.$store.dispatch("auth/loadCurrentUser", { id: userId });
  }
}

• 组件中通过计算属性或直接使用store getter获取currentUser，确保响应式更新：

computed: {
  currentUser() {
    return this.$store.getters["auth/isCurrentUser"];
  }
}

另外注意：原Vue Store的state定义存在语法错误，return currentUser: null必须改为return { currentUser: null }，否则state初始化失败会导致currentUser始终为null。

内容的提问来源于stack exchange，提问作者Mr. A