吉鹏 / gulu-admin

Blame view

src/views/permission/directive.vue 3.16 KB
edit raw normal view history
d7d9c38c2   Adam   auto commit the c... 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
 
  <template>
    <div class="app-container">
      <switch-roles @change="handleRolesChange" />
      <div :key="key" style="margin-top:30px;">
        <div>
          <span v-permission="['admin']" class="permission-alert">
            Only
            <el-tag class="permission-tag" size="small">admin</el-tag> can see this
          </span>
          <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">
            v-permission="['admin']"
          </el-tag>
        </div>
  
        <div>
          <span v-permission="['editor']" class="permission-alert">
            Only
            <el-tag class="permission-tag" size="small">editor</el-tag> can see this
          </span>
          <el-tag v-permission="['editor']" class="permission-sourceCode" type="info">
            v-permission="['editor']"
          </el-tag>
        </div>
  
        <div>
          <span v-permission="['admin','editor']" class="permission-alert">
            Both
            <el-tag class="permission-tag" size="small">admin</el-tag> and
            <el-tag class="permission-tag" size="small">editor</el-tag> can see this
          </span>
          <el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">
            v-permission="['admin','editor']"
          </el-tag>
        </div>
      </div>
  
      <div :key="'checkPermission'+key" style="margin-top:60px;">
        <aside>
          {{ $t('permission.tips') }}
          <br> e.g.
        </aside>
  
        <el-tabs type="border-card" style="width:550px;">
          <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
            Admin can see this
            <el-tag class="permission-sourceCode" type="info">
              v-if="checkPermission(['admin'])"
            </el-tag>
          </el-tab-pane>
  
          <el-tab-pane v-if="checkPermission(['editor'])" label="Editor">
            Editor can see this
            <el-tag class="permission-sourceCode" type="info">
              v-if="checkPermission(['editor'])"
            </el-tag>
          </el-tab-pane>
  
          <el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
            Both admin or editor can see this
            <el-tag class="permission-sourceCode" type="info">
              v-if="checkPermission(['admin','editor'])"
            </el-tag>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </template>
  
  <script>
  import permission from '@/directive/permission/index.js' // 权限判断指令
  import checkPermission from '@/utils/permission' // 权限判断函数
  import SwitchRoles from './components/SwitchRoles'
  
  export default {
    name: 'DirectivePermission',
    components: { SwitchRoles },
    directives: { permission },
    data() {
      return {
        key: 1 // 为了能每次切换权限的时候重新初始化指令
      }
    },
    methods: {
      checkPermission,
      handleRolesChange() {
        this.key++
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .app-container {
    /deep/ .permission-alert {
      width: 320px;
      margin-top: 15px;
      background-color: #f0f9eb;
      color: #67c23a;
      padding: 8px 16px;
      border-radius: 4px;
      display: inline-block;
    }
    /deep/ .permission-sourceCode {
      margin-left: 15px;
    }
    /deep/ .permission-tag {
      background-color: #ecf5ff;
    }
  }
  </style>