y-app

项目简介

基于vue3及element-plus的后台管理demo。权限控制，路由控制，vuex全局数据管理等。

项目源码

预览

项目目录

|-- y-app
    |-- .browserslistrc
    |-- .eslintrc.js
    |-- .gitignore
    |-- auto-imports.d.ts
    |-- babel.config.js
    |-- components.d.ts
    |-- package.json
    |-- README.md
    |-- tsconfig.json
    |-- vue.config.js
    |-- yarn.lock
    |-- public
    |   |-- favicon.ico
    |   |-- index.html
    |-- src
        |-- App.vue
        |-- main.ts
        |-- permission.ts               -->router  permission
        |-- shims-vue.d.ts
        |-- api                         -->API接口
        |   |-- login.ts
        |-- assets
        |   |-- avatar.jpg
        |   |-- logo.png
        |   |-- other_avatar.png
        |   |-- banner
        |   |   |-- 1.jpg
        |   |-- img
        |   |   |-- 404.jpg
        |   |   |-- background.jpg
        |   |   |-- home.jpg
        |   |   |-- login.jpg
        |   |-- style
        |       |-- global.scss
        |       |-- reset.css
        |-- components
        |   |-- HelloWorld.vue          -->demo组件
        |   |-- globalAsideMenu         -->侧边栏
        |   |   |-- index.vue
        |   |-- globalHeader            -->头部导航
        |   |   |-- index.vue
        |   |-- menuItem                -->侧边栏菜单
        |   |   |-- index.vue
        |   |-- viewTags                -->快捷切换历史菜单
        |   |   |-- index.vue
        |   |-- yCountTo                -->数字变化组件
        |   |   |-- index.vue
        |   |-- yProgress               -->进度条组件
        |       |-- index.vue
        |       |-- README.md
        |-- layouts                     -->全局RouterView
        |   |-- GlobalLayout.vue        -->全局RouterView
        |   |-- GlobalRouterView.vue    -->全局RouterView
        |   |-- UserLayout.vue          -->登录
        |-- locals                      -->国际化
        |   |-- index.ts
        |   |-- lang
        |       |-- en.ts
        |       |-- zh.ts
        |-- plugins                     -->全局插件注册
        |   |-- echarts.ts
        |   |-- index.ts
        |-- router                      -->Router
        |   |-- index.ts
        |   |-- routes.ts
        |-- store                       -->vuex store
        |   |-- index.ts
        |   |-- modules
        |       |-- app.ts              -->app状态
        |       |-- user.ts             -->用户信息
        |-- utils
        |   |-- request.ts              -->请求封装
        |   |-- storage-vars.ts         -->storage key
        |   |-- utils.ts                -->工具类
        |-- views
            |-- about
            |   |-- index.vue
            |-- error-page
            |   |-- index.vue
            |-- home
            |   |-- index.vue
            |-- login
            |   |-- index.vue
            |-- table
                |-- baseTable.vue

说明

登录及用户信息接口使用setTimeout写死数据来模拟，使用admin账号（密码随意）登录是管理员权限，随便输入的账号登录属于测试用户，权限 只有['home', 'about']

动态权限指令

全局注册 v-permission 指令

用法

基础用法

<el-button v-permission="['admin', 'about']" type="primary">测试权限about</el-button>

动态变化权限用法

<template>
    <el-button
      v-permission="permission"
      type="primary"
    >
      动态按钮权限
    </el-button>
    <el-button
      type="primary"
      @click="handleClick"
    >
      切换动态按钮显示
    </el-button>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const permission = ref(['admin', 'about'])
// 切换按钮权限
const handleClick = () => {
    if (permission.value.length === 1) {
      permission.value = ['admin', 'table']
    } else {
      permission.value = ['admintable']
    }
}
</script>

指令代码实现

// permission封装的判断权限方法
export const permission = (permission: any): boolean => {
  const state: any = store.state
  const roles = state.user.roles
  if (permission && permission instanceof Array && permission.length) {
    return roles.some((role: any) => permission.includes(role))
  }
  if (permission && typeof permission === 'string') {
    return roles.includes(permission)
  }
  return false
}

// permission封装的判断权限方法
app.directive('permission', {
    // 指令初始化
    mounted(el, binding: DirectiveBinding, vNode: any) {
        const roles = binding.value
        if (!permission(roles)) {
            const comment = document.createComment('')
            Object.defineProperty(comment, 'setAttribute', {
                value: () => undefined
            })
            // 缓存当前vNode,parentNode
            vNode.parentNode = el.parentNode
            vNode.currentEl = comment
            el.parentNode && el.parentNode.replaceChild(comment, el)
        }
    },
    // 指令更新
    updated (el, binding: DirectiveBinding, vNode: any, prevVNode: any) {
        const roles = binding.value
        if (permission(roles)) {
            prevVNode && prevVNode.parentNode && prevVNode.parentNode.replaceChild(el, prevVNode.currentEl)
        } else {
            const comment = document.createComment('')
            Object.defineProperty(comment, 'setAttribute', {
                value: () => undefined
            })
            vNode.parentNode = el.parentNode
            vNode.currentEl = comment
            // 判断缓存parentNode是否存在，存在重新插入节点
            el.parentNode && el.parentNode.replaceChild(comment, el)
        }
    }
})

下载

git clone https://github.com/loveyyao/vue3.git

依赖按照

npm install

运行

npm run serve