vue权限路由实现的方法示例总结

return;
}
if(!this.$store.state.initedApp){
this.$router.replace({ path: '/init' });
return
}
}
}
</script>

404组件里判断已经登录，接着判断应用是否已经初始化(用户权限信息，可访问菜单，路由等是否已经从后端取得)。没有初始化则跳转到/init路由

<template>
 <div></div>
</template>
<script>
import { getAccessMenuList } from "../mock/menus";
import components from "../router/routerComponents.js";
export default {
 async mounted() {
 if (!this.$store.state.isLogin) {
  this.$router.push({ path: "/login" });
  return;
 }
 if (!this.$store.state.initedApp) {
  const loading = this.$loading({
  lock: true,
  text: "初始化中",
  spinner: "el-icon-loading",
  background: "rgba(0, 0, 0, 0.7)"
  });
  let menus = await getAccessMenuList(); //模拟从后端获取
  var routers = [...menus];
  for (let router of routers) {
  let component = components[router.component];
  router.component = component;
  }
  this.$router.addRoutes(routers);
  this.$store.dispatch("setAccessMenuList", menus).then(() => {
  loading.close();
  this.$router.replace({
   path: "/"
  });
  });
  return;
 } else {
  this.$router.replace({
  path: "/"
  });
 }
 }
};
</script>

init组件里判断应用是否已经初始化(避免初始化后，直接从地址栏输入地址再次进入当前组件)。

如果已经初始化，跳转/路由(如果后端返回的路由里没有定义次路由，则会跳转404)。

没有初始化，则调用远程接口获取菜单和路由等，然后处理后端返回的路由，将component赋值为真正
的组件，接着调用addRoutes挂载新路由，最后跳转/路由即可。菜单的处理也是在此处，看实际
需求。

实现例子

缺点

在404页面做了判断，感觉比较怪异
多引入了一个init页面组件

总结

比较推荐后面两种实现方式。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对软件开发网的支持。