Backstage management system dynamic routing menu

Backstage management system dynamic routing menu

Backstage management system authority control + dynamic routing menu

I’m currently working on the background management system permissions, so I’ll make a note here, only to consolidate the
idea: dynamic routing first needs to request the routing menu when the user logs in, and then save it on the front end (you can save it in the browser or store it in the warehouse) , And then filtered to form a complete routing menu

Environment: vue2.0. Regarding why not vue3, element-ui was chosen hastily at that time. In fact, other ui libraries can be used: such as vuetify, storybook, ionic-framework

First create a permission.js file at the same level as
main.js for routing filtering, and then import it in main.js : import'./
permission ' Use the nprogress plug-in in permission.js to display the loading progress
and then use router, store , ngrogress, token, menuApi, etc. are introduced in
the routing front guard hook to do the corresponding logic processing

//白名单列表
const whiteList =['','']
//to:即将路由的地址
//form:当前的路由地址，也是马上要离开的地址
//next:执行进入的下一个路由
router.beforeEach((to,from,next)=>{
    
    
  //如果需要重新定义标题名字
  if(to.meta.title){
    
    
    document.title = to.meta.title + '-' +'...'
  }
  NProgress.start() 
  //再进行有没有token的判断，有token直接进入，没token则跳转到登录页面
  if(token){
    
    
    //还需要做跳转的判断，是进入登录页面还是其他页面，如果不是登录页面还需要判断用户信息是否已经拉取完毕，
    //还有菜单是否拉取
    if(to.path =='/login'){
    
    
       next()
        NProgress.done() 
    }else{
    
    
      if('用户信息是否已经拉取完，详情视实际情况做判断'){
    
    
        //没拉去在此处拉去用户信息，之后请求菜单列表，请求菜单并加工菜单loadMenus(next,to)
     }
     if('如果登录了菜单没拉到，在此处拉去'){
    
    
        //调用菜单获取方法
     }
     next()
   }     
 }else{
    
    
  //如果有设置有白名单列表，可直接进入,否则重定向到登录页
  if(whiteList.indexOf(to.path) !=-1){
    
    
     next()
  }else{
    
    
    next(`/login?redirect=${
      
      to.path}`)
  }
 }
})

The data format returned by my backend is like this,

and the menu list returned by the backend is stored in the store. Our main purpose is to process the components in the menu list returned by the backend into component:() => import( '@/views/login/login.vue') this type of format

    const asyncRouter = filterAsyncRouter(res.data.data.treeData)
             store.dispatch('GenerateRouters',asyncRouter).then(()=>{
    
    
                 //存储路由 动态添加可访问路由表
                 router.addRoutes(asyncRouter)
                 next({
    
    ...to,replace:true})
             })
    //store中的filterAsyncTouter
	export const filterAsyncRouter = routes =>{
    
    
	    //遍历后台的路由字符串，转换为组件对象
	    const accessedRouters = routes.filter(router =>{
    
    
	        if(router.component) {
    
    
	            if(router.component ==='Layout'){
    
    
	                //Layout组件特殊处理
	                router.component = Layout## 标题
	            }else {
    
    
	                const component = router.component
	                router.component = loadView(component)
	            }
	        }
	        //如果下一层还有children，再次使用递归遍历
	        if( router.children && router.children.length && router.children !=null){
    
    
	            router.children = filterAsyncRouter(router.children)
	        }
	        return true
	    })
	    return accessedRouters
	}
	export const loadView = view =>{
    
    
	    return () => import(`@/views/${
      
      view}`)
	}
	//GenerateRouters   需要添加到路由中的路由 store文件中
	import {
    
    constantRoutes} from '../../router'
	const permission ={
    
    
	    state:{
    
    
	        routes:constantRoutes,
	        addRouters:[]
	    },
	    mutations:{
    
    
	        SET_ROUTERS:(state,routes) =>{
    
    
	            state.addRouters = routes,
	            state.routes = routes  //左侧菜单栏光展示后端给的路由
	            // routes 为动态路由 ，将后台给的路由菜单跟写在router文件中的路由菜单同步展示在左侧菜单栏
	            // state.routes = constantRoutes.concat(routes)
	        }
	    },