后端管理系统，前后端分离的框架若依管理后台，来看下vue3+element-plus版本。

项目目录

  project 
	  public 开放资源
	    src
            api  接口请求定义
            assets  静态资源
            components  组件
            directive  自定义指令 权限校验
            layout  布局
            plugins 插件
            router  路由
            store  
            utils  工具
            views  业务页面
	     vite  编译工具

main.js 入口函数，引入组件：自定义App，store、router、directive，图标，自定义分页组件Pagination、表格工具RightToolbar、标签组件DictTag、树选择组件TreeSelect。

app.mount('#app')将App挂载到index.html页面。

动态路由 

1、自定义router

router/index.js中引入了vue-router，定义了默认的路由 constantRoutes

2、应用router

main.js 中引入router

import router from './router'

app.use(router)

3、动态获取路由

Permission.js 通过router的拦截器 router.beforeEach 获取用户信息后GetInfo，获取路由信息GenerateRoutes。

getRouters从后台获取数据。

GenerateRoutes({ commit }) {
      return new Promise(resolve => {
        // 向后端请求路由数据
        getRouters().then(res => {
          const sdata = JSON.parse(JSON.stringify(res.data))
          const rdata = JSON.parse(JSON.stringify(res.data))
          const defaultData = JSON.parse(JSON.stringify(res.data))
          const sidebarRoutes = filterAsyncRouter(sdata)
          const rewriteRoutes = filterAsyncRouter(rdata, false, true)
          const defaultRoutes = filterAsyncRouter(defaultData)
          commit('SET_ROUTES', rewriteRoutes)
          commit('SET_SIDEBAR_ROUTERS', constantRoutes.concat(sidebarRoutes))
          commit('SET_DEFAULT_ROUTES', sidebarRoutes)
          commit('SET_TOPBAR_ROUTES', defaultRoutes)
          resolve(rewriteRoutes)
        })
      })
    }
  }

 4、更新路由

 

通过store的方式更新路由

constantRoutes.concat(routes)在默认路由的基础上追加动态路由

 导航菜单

组件Sidebar根据 sidebarRoutes 生成菜单。

<div :class="{ 'has-logo': showLogo }" :>
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar :class="sideTheme" wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground"
        :text-color="sideTheme === 'theme-dark' ? variables.menuColor : variables.menuLightColor"
        :unique-opened="true"
        :active-text-color="theme"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="(route, index) in sidebarRouters"
          :key="route.path + index"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
  </div>
  
	//从store获取数据
  const sidebarRouters =  computed(() => store.getters.sidebarRouters);

 按钮权限

1、自定义指令

import hasRole from './permission/hasRole'
import hasPermi from './permission/hasPermi'

export default function directive(app){
  app.directive('hasRole', hasRole)
  app.directive('hasPermi', hasPermi)
}

2、判断当前的权限值value是否在store的权限列表permissions中

export default {
  mounted(el, binding, vnode) {
    const { value } = binding
    const all_permission = "*:*:*";
    const permissions = store.getters && store.getters.permissions

    if (value && value instanceof Array && value.length > 0) {
      const permissionFlag = value

      const hasPermissions = permissions.some(permission => {
        return all_permission === permission || permissionFlag.includes(permission)
      })

      if (!hasPermissions) {
        el.parentNode && el.parentNode.removeChild(el)
      }
    } else {
      throw new Error(`请设置操作权限标签值`)
    }
  }
}

 3、页面按钮权限

<el-button
  size="mini"
  type="text"
  icon="Edit"
  @click="handleUpdate(scope.row)"
  v-hasPermi="['system:dept:edit']"
  >修改</el-button>

总结： 梳理了项目的目录结构，app的加载过程，动态路由及页面权限控制。