用户权限列表

src/components/access/access.vue

@@ -0,0 +1,50 @@
+<template>
+    <div class="access">
+      <el-breadcrumb separator-class="el-icon-arrow-right">
+        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+        <el-breadcrumb-item>权限管理</el-breadcrumb-item>
+        <el-breadcrumb-item>权限列表</el-breadcrumb-item>
+      </el-breadcrumb>
+
+      <el-card class="box-card">
+        <el-table :data="data" border stripe>
+          <el-table-column label="#" type="index"></el-table-column>
+          <el-table-column label="权限名称" prop="authName"></el-table-column>
+          <el-table-column
+            label="路径" prop="path"
+          ></el-table-column>
+          <el-table-column
+            label="权限等级" prop="level"
+          >
+            <template scope="scope">
+              <el-tag :type="['','success','warning',][scope.row.level]">等级{{['一','二','三'][scope.row.level]}}</el-tag>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+    </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      data: []
+    }
+  },
+  methods: {
+    async list () {
+      const { data: res } = await this.$http.get('rights/list')
+      if (res.meta.status !== 200) {
+        this.$message.error(res.meta.msg)
+      }
+      this.data = res.data
+      console.log(res.data)
+    }
+  },
+  mounted () {
+    this.list()
+  }
+}
+</script>
+<style lang="less" scoped></style>

src/router/router.js

@@ -4,6 +4,7 @@ import Login from '../components/Login'
 import Home from '../components/Home'
 import welcome from '../components/welcome'
 import users from '../components/users/users'
+import access from '../components/access/access'
 
 Vue.use(VueRouter)
 
@@ -16,7 +17,8 @@ const routes = [
     redirect: '/welcome',
     children: [
       { path: '/welcome', component: welcome },
-      { path: '/users', component: users }
+      { path: '/users', component: users },
+      { path: '/rights', component: access }
     ]
   }
 ]