vue elementUi权限管理

第一次摸索着完成vue的权限管理，在此记录下自己搬砖的点点滴滴，希望以后回望的时候，有迹可循，也分享给需要的小伙伴们，参考哦~
思路如下：
1，登录成功后，把后台返回的用户信息，存vueX的state；
2，vueX的actions调接口，返回数据后，赋值给state，然后调用递归，来把返回的数据处理成我们要的格式
3，permission.js中router.beforeEach（）,调actions的方法，这里用到了异步执行，所以，需要调用actions的方法后，才能进行下一步，否则，会导致跳转失效

<!-- html的部分-->
 <el-button type="primary" @click="l`在这里插入代码片`ogin()">登陆</el-button>

// js的部分
 login() {
    ```````````````````````````````````````````
      // 请求接口
      api.login(params).then(res => {
        if (res.code == 200) {
          // 请求到数据后，存入token和id
          setToken(res.object.token, res.object.id);
          // 存用户名和姓名
          setUserName(res.object.name, res.object.username);

         `````````````````````````````

          // 1，登录成功后，把后台返回的用户信息，存vueX的state；
          if (res.object.sysNewMenuVoList.length > 0) {
            this.$store.commit("GetUserInfo", res.object.sysNewMenuVoList);
          } else {// 否则不让登陆
            this.$router.push("/login");
            this.$message.error("您还未绑定角色，没有权限哦，请联系管理员");
            return;
          }

          if (params.password == "默认密码") {
            let id = getUserId();
            this.$prompt("请输入新密码", "您的密码为初始密码，请及时修改", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              inputPattern: /^[^ ]+$/,
              inputErrorMessage: "密码不能为空"
            })
              .then(({ value }) => {
                const newPassword = md5(md5(value));
                api
                  .modifyPassword({ id: id, newPassword: newPassword })
                  .then(res => {
                    if (res.code == 200) {
                      this.$alert("密码修改成功，请重新登录", {
                        confirmButtonText: "确定",
                        callback: action => {
                          removeAccount();
                          this.logout();
                          this.password = "";
                        }
                      });
                    } else {
                      this.$message.error(res.message);
                    }
                  });
              })
              .catch(() => {
                this.$message({
                  type: "info",
                  message: "取消输入"
                });
              });
          } else {
            this.$router.push("/material");
          }

          
         ```````````````````````````````````````````````
      });
    },

2，vueX的actions调接口，返回数据后，赋值给state，然后调用递归，来把返回的数据处理成我们要的格式

// /**
//  * 递归过滤异步路由表，返回符合用户角色权限的路由表
//  * @param resData
//  * @param routerData
//  */


export function getRouterList(resData, routerData) {

    for (let item of resData) {
        // console.log('1111')
        a(item, routerData)
    }

}

export function a(item, routerData) {
    for (let i of item.childrenMenuVoList) {
        for (let routerItem of routerData) {
            if (routerItem.children &&
                routerItem.children.length > 0 &&
                routerItem.children[0].meta.percode == i.percode) {
                routerItem.children[0].meta.roles = true;
                break
            }
        }
        if (i.childrenMenuVoList.length > 0) {
            a(i, routerData)
        }
    }
}

const permission = {
    state: {
        addRouters: [],
    },

    getters: {},

    mutations: {
        GetUserInfo(state, routers) {
            state.addRouters = routers
            // console.log('存变', state.addRouters)
        },
    },

    actions: {
        getAccountInfo({ commit }, router1) {
            return new Promise((resolve, reject) => {
                api.getAccountInfo().then(res => {
                    if (res.code == 200) {
                        commit('GetUserInfo', res.object.sysNewMenuVoList)
                        getRouterList(res.object.sysNewMenuVoList, router1.options.routes)
                        resolve()
                    }

                })
            })
        },

    }
}
export default permission;

3，permission.js中router.beforeEach（）,调actions的方法，这里用到了异步执行，所以，需要调用actions的方法后，才能进行下一步，否则，会导致跳转失效，permission要先引入到main.js中

// main.js中引入permission
import './permission'

// permission.js中
import Vue from 'vue'
import router from './router';
import store from '@/store/store'
import { getToken } from "@/api/auth.js"
import { getBtnPermission } from "@/api/btnPermission.js"


const whiteList = ['/login'] // 不重定向白名单

router.beforeEach((to, from, next) => {
  if (getToken()) {// 判断是否有token
    if (to.path == "/login") {
      next()
    } else {
      // console.log('进1')
      store.dispatch("getAccountInfo", router).then(() => {
        // console.log('进2')
        if (to.meta.roles) {
          // console.log('进3')
          next()
        } else {// 当不满足roles的时候，跳404
          next('*')
        }
      })
    }
  } else {
    if (whiteList.indexOf(to.path) !== -1) {
      next()
    } else {
      next('/login')
    }
  }
})