简易权限模型

什么是权限模型

登录我们的管理系统可以看到，我们现在不管是管理员还是用户都会被看做是普通用户，在系统中看到的都是一样的东西，但平常我们都知道不同角色访问系统那么系统的呈现应该是不一样的才对，这时候就需要用到权限模型。

正文

我们去数据库中将user表加一个属性role，用1表示管理员，2表示普通用户。

然后对应的后台中我们要改一下user的实体类：

package com.why.demo.entity;

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@TableName("user") //Mp的一个语法，让这个类的属性名和数据库表中的字段一一对应起来，必须要写
@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    @TableId(type = IdType.AUTO) //Mp的语法，让这个id自然顺序自增，而不是用雪花算法乱生成
    private Integer id;
    private String username;
    private String password;
    private String nickName;
    private Integer age;
    private String sex;
    private String address;
    private Integer role;
}

然后我们在User.vue中加一点东西用来分情况讨论登录的角色身份：


现在我们已经区分了角色，那么我们怎么来控制菜单显示，让非管理员只能看到除了用户管理以外的信息呢（我们规定只有管理员可以查看用户信息）？
其实很简单，因为我们之前在登录页面其实是往sessionStorage中存入了用户信息的，我们用当前登录的用户信息中的role属性来判断是否显示“用户登录”这一栏即可。
我们在侧边栏组件Aside.vue中进行如下改造：

<template>
    <div>
                <el-menu
                        style="width: 200px; min-height: calc(100vh - 50px)"
                        :default-active="path"
                        router
                        class="el-menu-vertical-demo">
                    <el-sub-menu index="1" v-if="user.role === 1">
                        <template #title>系统管理</template>
                        <el-menu-item index="/user">用户管理</el-menu-item>
                    </el-sub-menu>


                    <el-menu-item index="/book">书籍管理</el-menu-item>
                    <el-menu-item index="/news" v-if="user.role === 2">新闻管理</el-menu-item>

                </el-menu>

    </div>
</template>

<script>
    export default {
        name: "Aside",
        data(){
            return {
                user:{},
                path: this.$router.path //设置默认高亮的菜单
            }
        },
        created(){
            let userStr = sessionStorage.getItem("user") || {}
            this.user = JSON.parse(userStr);

            //请求服务端，确认当前登录用户信息的合法信息
            request.get("/user"+this.user.id).then(res => {
                if(res.code == 0){
                    this.user = res.data;
                }
            })
        }
    }
</script>

<style scoped>

</style>

然后就可以实现分角色访问啦。现在以管理员身份访问则不显示新闻了。

那现在除了菜单项的控制显示呢，我们也可以控制按钮的显示。比如我们现在去控制书籍，让其可以让管理员看到书籍的新增更改删除，而普通用户不可以。
只要将上面的方法如法炮制进Book.vue文件中即可，现在我们可以看见普通用户登录之后不再有相关操作按钮：

然后想实现其他的也就用这个方法就可以了，如果只是为了实现自己的一些小demo小项目的话用上面这个方法是完全可以做到的，但是如果是做大项目的话、比如企业级的这种，那么就不能这么写了，因为安全性很低，那种项目就应该用安全性非常高的框架了。