若依admin框架 vue3+element-plus 一

「这是我参与2022首次更文挑战的第7天，活动详情查看：2022首次更文挑战」

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

原作者 git地址：https://github.com/yangzongzhuan/RuoYi-Vue3.git

项目目录

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 }" :style="{ backgroundColor: sideTheme === 'theme-dark' ? variables.menuBackground : variables.menuLightBackground }">
    <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的加载过程，动态路由及页面权限控制。

若依管理后台的 vue3+mybatis-plus spring-cloud版本