后台管理系统2——数据权限控制

1 数据权限控制

通过不同的身份进行实现不同的功能。

1.1数据库的修改

在原先 user表 进行修改，添加一个新的字段，叫做role,用来区分不同身份的用户

1.2 后端代码的修改

在entity文件夹下的User类进行添加

@TableName("user")
// 自动进行生成getter setter 方法
@Data

public class User {
    @TableId(type = IdType.AUTO)
    private Integer id;
    private String username;
    private String password;
    private String nickName;
    private Integer age;
    private String sex;
    private String address;
    private Integer role;
}

1.3 前端代码的修改

在views文件夹下的User.vue组件中进行添加一行显示，添加的代码如下：

  <el-table :data="tableData" border style="width: 100%" stripe>
      <!-- 在进行数据显示的时候，给日期加上排序 -->
      <el-table-column prop="id" label="ID" sortable />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="nickName" label="昵称" />
      <el-table-column prop="age" label="年龄" />
      <el-table-column prop="sex" label="性别" />
      <el-table-column prop="address" label="地址" />
      <el-table-column label="角色">
        <template #default="scope">
          <span v-if="scope.row.role === 1">管理员</span>
          <span v-if="scope.row.role === 2">普通用户</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="150">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm
            title="确认删除吗？"
            @confirm="handleDelete(scope.row.id)"
          >
            <template #reference>
              <el-button type="danger" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

1.4 Aside组件的修改

由于在登陆的时候，已经登录的信息储存到sessionStorage中，所以可以用过判断**user.role **来进行显示侧边栏的内容。
HTML

<template>
  <div>
    <!-- el-menu 存在一个属性 router ，
        功能是，当进行点击里面的内容时，会自动进行跳转
        会根据index中的路由内容进行跳转
     -->
    <!-- default-active="user" 进行控制高亮 -->
    <el-menu
      :default-active="path"
      class="el-menu-vertical-demo"
      router
      style="width: 200px; min-height: calc(100vh - 50px)"
    >
      <el-sub-menu index="1" v-if="user.role === 1">
        <template #title>
          <span>系统管理</span>
        </template>
        <el-menu-item index="/user">用户管理</el-menu-item>
      </el-sub-menu>
      <!-- index 中的值与路由名称相对应 -->
      <el-menu-item index="/book">图书管理</el-menu-item>
      <el-menu-item index="/news" v-if="user.role === 2">新闻管理</el-menu-item>
      <!-- <el-menu-item index="date" :route="{ path: '/' }">数据管理</el-menu-item> -->
    </el-menu>
  </div>
</template>

<script>
import request from "../utils/request";

export default {
  name: "Aside",
  data() {
    return {
      path: this.$route.path, //设置默认高亮的菜单
      user: {}, //用来接收转换之后的数据
    };
  },
  created() {
    // 获取到sessionStorage中的user
    let userStr = sessionStorage.getItem("user") || "{}";
    // 转换为 JSON类型
    this.user = JSON.parse(userStr);

    // 请求服务器，确认当前登录用户的合法信息，也不能保证绝对的安全
    request.get("/user/" + this.user.id).then((res) => {
      console.log(res);
      if (this.code === "0") {
        this.user = res.data;
      }
    });
  },
};
</script>