Vue2 TypeScript项目如何自定义@Security组件级装饰器实现权限校验

实现步骤 #

1. 自定义@Security装饰器

直接用vue-class-component官方提供的createDecorator工具封装即可，作用是把传入的权限码挂载到组件的自定义选项上：

import { createDecorator } from 'vue-class-component'

// 装饰器工厂，支持传入权限码参数
export const Security = (permissionCode: string) => {
  return createDecorator((options) => {
    // 把权限码挂载到组件选项上，后续生命周期可以直接读取
    options.securityPermission = permissionCode
  })
}

如果是JS项目去掉类型声明即可，逻辑完全通用。

2. 加权限校验逻辑

两种方案可选，按需使用：

• 全局校验（所有组件自动生效）：注册全局mixin，在生命周期中读取权限码做校验，要在new Vue()之前执行：

import Vue from 'vue'
import store from '@/store' // 你的Vuex实例
import router from '@/router' // 你的路由实例

Vue.mixin({
  beforeCreate() {
    const targetPermission = this.$options.securityPermission
    // 没有配置权限码的组件直接跳过校验
    if (!targetPermission) return

    // 这里替换成你自己的权限校验逻辑
    const hasPermission = store.state.user.permissionList.includes(targetPermission)
    if (!hasPermission) {
      // 校验失败的处理逻辑，比如弹提示+跳403
      Vue.prototype.$message.error('无该页面访问权限')
      router.replace('/403')
    }
  }
})

• 局部校验（避免全局污染）：单独封装mixin，只给需要校验的组件引入：

// 单独封装的权限校验mixin
import Vue from 'vue'
import store from '@/store'
import router from '@/router'

export const SecurityMixin = Vue.extend({
  beforeCreate() {
    // 逻辑和全局mixin完全一致
    const targetPermission = this.$options.securityPermission
    if (!targetPermission) return
    const hasPermission = store.state.user.permissionList.includes(targetPermission)
    if (!hasPermission) {
      Vue.prototype.$message.error('无该页面访问权限')
      router.replace('/403')
    }
  }
})

组件使用时在@Component参数中引入mixin即可：

@Component({
  mixins: [SecurityMixin]
})
@Security('USERS_LIST')
export default class UserList extends Vue {
  // 组件逻辑
}

3. 最终使用方式

和你期望的调用格式完全一致：

import { Component, Vue } from 'vue-property-decorator'
import { Security } from '@/utils/decorators' // 你刚才定义装饰器的路径

@Component
@Security('USERS_LIST')
export default class UserList extends Vue {
  // 组件逻辑
}

如果需要支持多权限校验，把装饰器的入参改成数组，对应调整校验逻辑即可。

内容的提问来源于stack exchange，提问作者jklemmack