vue权限控制——菜单及界面控制（含模拟数据）

本文主要通过一组模拟数据来简要说明：

vue中如何通过权限控制来达到根据用户角色控制菜单及界面展示

文件自取：提取码：Shin

提示：所有在原文件基础上修改的代码都会伴随注释。

目录

初始化

获取用户角色数据

修改菜单展示页面

session存储

识别token

---

初始化

此处提供的数据不包含依赖，需要自行通过控制台安装依赖

npm  install

为了方便后期的登录操作，找到Login.vue页面，把data内的数据填写上默认值，登录页面会默认填写进admin角色的账户和密码

接下来是取消vue纠错 ，在文件夹下新增vue.config.js文件，写入以下代码

module.exports = {
  lintOnSave: false
}

获取用户角色数据

对Login.vue里的文件进行修改，文件本身已经在本页面写好了获取数据的方法，简明扼要，只需要稍作修改方便我们后续的操作

  methods: {
    ...mapMutations(['setUser']),
    submitForm () {         
      this.$refs.form.validate(valid => {
        if (valid) {
          this.isLogin = true
          this.$api.login({
            username: this.userData.username,
            password: this.userData.password
          }).then(res => {
            console.log(res.data.rights);
            this.isLogin = false
            if (!res.data) {
              this.$message({
                message: '用户名或密码错误！',
                type: 'error'
              })
              return false
            }
            this.setUser(res.data.rights)//本身默认为res.data添加一点方便后续操作
            this.$router.push('