vue-route基于动态加载路由配置的权限管理

最新推荐文章于 2024-01-10 17:08:28 发布

acgCode

最新推荐文章于 2024-01-10 17:08:28 发布

阅读量328

点赞数

分类专栏：前端 # Vue 文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/sayuonly/article/details/118905424

版权

本文介绍在前端开发中，如何基于动态加载的路由配置实现权限管理。首先清空原路由配置，然后格式化后台提供的路由，使其符合 vue-router 的要求，接着添加格式化后的路由，最后处理页面刷新时的路由配置恢复，确保路由安全且不会导致空白页面。

摘要由CSDN通过智能技术生成

在路由权限管理的开发过程中，基于不将用户的配置信息保留在前端的考虑，我着重研究了关于路由配置的动态加载方法。记录如下：

这里我从后端获取的路由配置如下：

routes:[
	{
   
		path: "/home",
		name: "home",
		componentPath: "views/Home",
		children: [
			{
   
				path: "/homeChild",
				name: "homeChild",
				componentPath: "views/Home/HomeChild"
			}
		]
	}
]

得到这个路由配置之后我需要做如下工作：

清空原路由配置（如果有多个内置系统，涉及多菜单切换的时候）；
格式化后台路由配置，让配置格式符合 vue-router 的要求；
添加路由配置；
刷新处理。

下面我们一个一个来说。

清空原路由配置

我在一次项目需求中碰到过这样的情况。一个系统中有两个子系统，这两个子系统的菜单都是根据他们的路由配置动态生成的。路由配置变化，菜单就会响应变化。但是多个系统之间出现路由重名的可能性就大大增加了，毕竟还是要保证路由配置的可读性，名字也不能乱起。所以每次切换系统的时候就需要清空原路由配置。

在这里我给 vue-router 的实例增加了一个新的方法，$addRoutes这个方法既完成了原路由的清空工作，也完成了新增路由的工作。这里我们只看清空原路由配置的相关代码。

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const baseRoutes = [
  {
   
    path: "/",
    name: "Login",
    component: () =