vue-element-admin学习笔记--权限加载及自定义布局，6

接着之前的笔记，参考源码的布局,增加用户下拉部分，其中个人信息后续回补充到具体的表单页面。搜索的组件准备弄成全文检索，暂时放置。现在布局部分还差了TagsView和右侧的抽屉功能。

Eldropdown 用户信息的下拉

用户信息部分直接使用了Dropdown组件,在vue-element-admin源码中有首页、个人中心、项目地址等及退出功能，自己测试先实现首页、个人中心（占位置不实现）、一个外链、退出功能。

主要使用router-link来实现。退出功能在el-dropdown-item中使用 @click.native来监听组件根元素的原生事件。用户的logout方法也比较好理解，即初始化掉对应的store并且删除相关的cookie.用户头像部分需要给用户增加一个属性，存储头像图片的URL。NavBar中增加logout方法，如下:

 methods: {
    async logout() {
      await this.$store.dispatch("user/logout");
      this.$router.push(`/user/login?redirect=${this.$route.fullPath}`);
    }
  }

在store的user模块下增加logout方法，同时需要增加对外访问的API方法及MOCK数据，其中logout方法和API中方法如下：

src>store>modules>user中

  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.userInfo.token)
        .then(() => {
          commit("SET_TOKEN", "");
          commit("SET_ROLES", []);
          removeToken();
          resetRouter();
          resolve();
        })
        .catch(error => {
          reject(error);
        });
    });
  },

这里增加了router中的一个resetRouter方法,问题的描述在vue-element-admin的源码中有说明"// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465"

src>api>user.js中

export function logout(token) {
  return request({
    url: "/api/user/logout",
    method: "post",
    data: { token: token }
  });
}

在Mock数据中，单独配置了一个user.js用来存放测试用户的数据，这里导入的时候需要注意，在node.js环境下无法直接使用ES6的import。user.js如下：

const userInfoMock = {
  userObj: {
    admin: {
      name: "admin",
      password: "111111",
      token: "AAAAAA",
      roles: ["admin"],
      avatar:
        "https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"
    },
    user: {
      name: "user",
      password: "222222",
      token: "BBBBBB",
      roles: ["user"],
      avatar:
        "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
    },
    guest: {
      name: "guest",
      password: "333333",
      token: "CCCCCC",
      roles: ["guest"],
      avatar:
        "https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif"
    }
  }
};

module.exports = userInfoMock;

user_logout.js的内容如下，和user_login类似，user_login中还是使用之前的数据方式：

function logout(req) {
  const method = req.method;
  let { token } = req.body;
  let res = null;
  const userJsonObj = require("./user").userObj;
  switch (method) {
    case "POST":
      for (let item in userJsonObj) {
        if (userJsonObj[item] && userJsonObj[item].token === token) {
          res = {
            message: userJsonObj[item].name + "退出成功",
            userInfo: { token: token }
          };
          break;
        }
      }
      res = {
        message: "未知用户,退出成功",
        userInfo: { token: token }
      };
      break;
    default:
      res = null;
  }
  return res;
}

//node.js下运行,按照模块规范注册
module.exports = logout;