Dashboard.vue 中展示登入用户的角色

src/views/admin/Dashboard.vue

@@ -1,6 +1,18 @@
 <template>
   <el-container>
     <el-main class="movie-list">
+      <div>
+        <h3>我的角色</h3>
+        <el-button
+          v-for="(item, index) in roles"
+          :key="index"
+          icon="el-icon-user-solid"
+          style="padding: 5px"
+          @click="goToRole(item)"
+        >
+          {{ item }}
+        </el-button>
+      </div>
       <div v-if="devops">
         <el-col :md="12" style="padding-right: 5px; padding-left: 5px; padding-bottom: 5px">
           <el-card class="box-card">
@@ -108,17 +120,21 @@
 
 <script>
 import { getDashboard } from '@/api/devops'
+import { getAuthedUser } from '@/utils/auth'
 
 export default {
   name: 'Dashboard',
   data() {
     return {
+      roles: [],
       devops: false,
       machineStatList: [],
       sysInfo: null
     }
   },
   created() {
+    const { roles, userId, avatarUrl, username } = getAuthedUser()
+    this.roles = roles
     this.devops = parseInt(process.env.VUE_APP_DEVOPS) === 1
     document.title = 'Dashboard'
     this.getData()
@@ -141,6 +157,9 @@ export default {
         this.$message.error(error.message)
       })
     },
+    goToRole(data) {
+      this.$message.info('role -> ' + data)
+    },
     goToDisk() {
       const path = '/disk'
       if (this.$route.path === path) {