dy-admin-manager/src/components/Auth/index.vue

<template>
  <div class="auth" v-if="isAuth">
    <slot></slot>
  </div>
</template>

<script>
  import store from '@/store'
  export default {
    name: 'auth',
    props: {
      auths: {
        type: String | Array
      },
      router: {
        type: Array
      },
      mulit: {
        type: Boolean,
        default() {
          return false
        }
      }
    },
    data() {
      return {
        isAuth: false
      }
    },
    async mounted() {
      let permission = window.localStorage.getItem('permission')
      permission = permission.split(',')
      this.isAuth = this.hasAuths(permission) && this.hasRouters() ? true : false
    },
    methods: {
      hasAuths(menus) {
        const auths = this.auths
        if(!auths) { // 判断是否有权限
          return false
        }
        // console.log(auths)
        if(typeof auths === 'object') {
          let sum = 0
          for(const auth of auths) {
            if(this.mulit) {
               if(menus.includes(auth)) {
                 sum ++
               }
            } else {
              return menus.includes(auth)
            }
          }
          if(sum === auths.length) {
            return true
          }
        } else {
          return menus.includes(auths)
        }
      },
      hasRouters() {
        const path = this.$route.path
        if(this.router) {
          return this.router.includes(path)
        }
        return true
      }
    }
  }
</script>

<style scoped lang="less">
  .auth {
    display: inline-block;
    // & + .auth {
    //   margin-left: 10px;
    // }
  }
</style>