项目中模块操做业务使用ajax

（需要使用接口认证）

修改封装的findData发送ajax请求

管理员列表内部搜索业务

---

复用之前的findData 方法即可实现整个查询业务。

实现退出业务

---

在下拉菜单上添加事件以及属性。

用户退出登录，二次登录系统菜单可能不存在的bug

---

在守卫中添加上面代码即可解决。

该系统属于单端登录，存在被顶掉token失效。

---

系统上再次操做。默认会发送请求，但是token失效。

在项目的整体请求封装文件中进行一次性处理。（request.js 的响应拦截器。）

1.在响应拦截器中静态处理（根据错误状态码写固定）

最终静态的处理代码

//响应拦截器
axios.interceptors.response.use(
  (response) => {
    //响应成功
    //写服务器响应错误处理
    let { code } = response.data;
    console.log(MessageBox);
    switch (code) {
      case 401:
        //token令牌失效
        //messageBox提示
        MessageBox.confirm("当前用户登录失效?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          //清除所有缓存
          removeAllStorage();
          //跳转登录
          router.replace({ path: "/login" });
        });

        break;
      case 404:
        break;
      case 500:
        break;
      default:
        break;
    }
    //简单的数据过滤
    return Promise.resolve(response.data);
  },
  (error) => {
    return Promise.reject(error);
  }
);

2.动态处理异常

将错误的状态码以及消息存在后端的服务器上表中（mysql）

用户登录成功之后发送ajax请求获取错误状态数据，将数据存储到vuex。在到request响应拦截中使用vuex获取错误状态集合。

项目中的模态框

---

项目中大量使用模态框，对模态框进行封装

在父组件中使用：