Vue通用后台管理——菜单权限功能

菜单权限功能

存在的三个问题

1 不同的账号登录有不同的权限，也就是说，有不同的页面

1.1 首先，在 login.vue页面的登录成功的里面，进行获取到返回数据中携带的页面信息
data.data.menu
1.2 由于信息是许多页面都需要进行使用的，所以进行写在store文件夹下，进行处理
对此，里面包含一个数组menu，和修改的方法 setMenu

export default{
   
    state:{
   
        menu:[]
    },
    mutations:{
   
        // 用来定义改变state的方法 同步状态
        // 此时的state就是接收的上面的   
        // 设置menu数据
        setMenu(state,val){
   
            state.menu = val
        }

    }
}

1.3 之后便是在登录页面进行调用setMenu,传递参数

  // 1 form 表单的校验通过
      this.$refs.form.validate((valid) => {
   
        if (valid) {
   
          // 2  如果存在 调用接口 并将form中的数据传入
          getMenu(this.form).then(({
     data }) => {
   
            // console.log(data);
            // 接下来 根据返回的数据code 进行判断是否返回成功
            if (data.code === 20000) {
   
              // 表示请求成功,拿到后端返回给我们的token 并保存到 cookie里面
              // console.log(data.data.token);
              Cookie.set("token", data.data.token);

              // 对于左侧列表的显示
              // 1 获取数据 存入到 store里面
              this.$store.commit("setMenu", data.data.menu);

              //