Http.js

  1. import Vue from "vue";
  2. import axios from "axios";
  3. import router from "@/router/router";
  4. // import qs from "querystring";
  5. import { getSession, Ddebounce, removeSession } from "@/utils/utils.js";
  7. // loading对象
  8. let loading = null;
  10. // 当前正在请求的数量
  11. let needLoadingRequestCount = 0;
  13. // 显示loading
  14. function showLoading() {
  15.   if (needLoadingRequestCount === 0 && !loading) {
  16.     loading = Vue.prototype.$loading({
  17.       lock: true,
  18.       text: "请求中,请稍等...",
  19.       spinner: "el-icon-loading",
  20.       background: "rgba(0, 0, 0, 0.7)"
  21.     });
  22.   }
  23.   needLoadingRequestCount++;
  24. }
  26. // 隐藏loading
  27. function hideLoading() {
  28.   needLoadingRequestCount--;
  29.   needLoadingRequestCount = Math.max(needLoadingRequestCount, 0);
  30.   if (needLoadingRequestCount === 0) {
  31.     toHideLoading();
  32.   }
  33. }
  35. let toHideLoading = Ddebounce(() => {
  36.   loading && loading.close();
  37.   loading = null;
  38. }, 500, false);
  40. const service = axios.create({
  41.   baseURL: "http://xxx.com", // 默认的地址
  42.   timeout: 30000, // 请求超时时间
  43.   headers: {},
  44. });
  46. // 请求拦截器
  47. service.interceptors.request.use(
  48.   config => {
  49.     config.headers = Object.assign(config.headers, { "ADMIN-TOKEN": getSession('token') || "" })
  50.     // 判断当前请求是否设置了不显示 Loading
  51.     if (config.headers.showLoading !== false) {
  52.       showLoading(config.headers.loadingTarget);
  53.     }
  54.     // 返回图片流方式处理
  55.     if (config.url.includes("/login/captcha")) {
  56.       config.responseType = "arraybuffer"
  57.     }
  58.     if (config.method.toLocaleLowerCase() === "get" || config.method.toLocaleLowerCase() === "delete") {
  59.       config.params = config.data;
  60.     }
  61.     return config;
  62.   },
  63.   error => {
  64.     // 判断当前请求是否设置了不显示 Loading
  65.     if (error.config.headers.showLoading !== false) {
  66.       hideLoading();
  67.     }
  68.     return Promise.reject(error);
  69.   }
  70. );
  72. // 返回拦截器
  73. service.interceptors.response.use(
  74.   config => {
  75.     // 判断当前请求是否设置了不显示 Loading
  76.     if (config.headers.showLoading !== false) {
  77.       hideLoading();
  78.     }
  79.     // 签名过期情况处理
  80.     if (config.data.code === 10100) {
  81.       removeSession("token");
  82.       router.push("/login");
  83.     }
  84.     return config;
  85.   },
  86.   error => {
  87.     // 判断当前请求是否设置了不显示 Loading
  88.     if (error.config.headers.showLoading !== false) {
  89.       hideLoading();
  90.     }
  91.     return Promise.reject(error);
  92.   }
  93. );
  95. // 挂载请求
  96. Vue.prototype.$axios = service;
  98. // 请求统一处理
  99. function requst(options) {
  100.   return new Promise((resolve, reject) => {
  101.     options
  102.       .then(res => {
  103.         // 返回图片流方式处理
  104.         if (res.config.url.includes("/login/captcha")) {
  105.           resolve('data:image/png;base64,' + btoa(new Uint8Array(res.data).reduce((data, byte) => data + String.fromCharCode(byte), '')))
  106.         } else {
  107.           if (res.data?.code == 0) {
  108.             resolve(res.data);
  109.           } else {
  110.             reject(res.data.msg || res.data.Msg || "加载数据超时，请稍后重试");
  111.           }
  112.         }
  113.       })
  114.       .catch(error => {
  115.         if (error.message.includes(`timeout of ${error.config.timeout}ms exceeded`)) {
  116.           reject("加载数据超时，请稍后重试");
  117.         } else {
  118.           reject(error);
  119.         }
  120.       });
  121.   });
  122. }
  124. // get.post.put.del.patch请求方法提取
  125. const get = (url, params, showLoading = true) => {
  126.   return requst(service.get(url, { data: params }, { headers: { showLoading } }));
  127. };
  128. const post = (url, params, showLoading = true) => {
  129.   return requst(service.post(url, params, { headers: { showLoading } }));
  130. };
  131. const put = (url, params, showLoading = true) => {
  132.   return requst(service.put(url, params, { headers: { showLoading } }));
  133. };
  134. const del = (url, params, showLoading = true) => {
  135.   return requst(
  136.     service.delete(url, { data: params }, { headers: { showLoading } })
  137.   );
  138. };
  139. const patch = (url, params, showLoading = true) => {
  140.   return requst(service.patch(url, { data: params }, { headers: { showLoading } }));
  141. };
  143. export default requst;
  144. export { get, post, put, del, patch };

Login.Request.js

  1. // 根据模块封装
  3. import { get, post } from "../Http";
  5. export default {
  7.   /**
  8.    * @method 获取登录图像验证码
  9.    * @param {*} key 随机数
  10.    */
  11.   getCodeImage: params =>
  12.     get(`/login/captcha?key=${params}`, "", false),
  14.   /**
  15.    * @method 获取图形验证码
  16.    * @param {*} key 随机数
  17.    */
  18.   checkLoginCode: params =>
  19.     get(`/login/check`, params, false),
  21.   /**
  22.    * @method 登录验证
  23.    * @param {*} name 登录名
  24.    * @param {*} password 密码
  25.    * @param {*} code 验证码
  26.    */
  27.   login: params =>
  28.     post(`/login`, params, false),
  30.   /**
  31.    * @method 退出登录
  32.    * @param {*}
  33.    */
  34.   logout: params =>
  35.     post(`/logout`, params, false),
  36. }

Login.vue 测试

  1. <template>
  2.   <div class="login-wrap">
  3.     <div class="ms-login">
  4.       <div class="ms-title">{{ adminTitle }}</div>
  5.       <el-form :model="form" :rules="rules" ref="ruleForm" label-width="0px" class="ms-content">
  6.         <el-form-item prop="username">
  7.           <el-input v-model="form.name" placeholder="请输入用户名称" clearable></el-input>
  8.         </el-form-item>
  9.         <el-form-item prop="password">
  10.           <el-input
  11.             type="password"
  12.             placeholder="请输入密码"
  13.             v-model="form.password"
  14.             show-password
  15.             clearable
  16.             maxlength="20"
  17.             show-word-limit
  18.           ></el-input>
  19.         </el-form-item>
  20.         <el-form-item label prop="code">
  21.           <div class="disflex flexdr">
  22.             <el-input placeholder="请输入验证码" v-model="form.code" clearable></el-input>
  23.             <el-image @click="refreshCode" :src="codeImage" alt class="codeImage">
  24.               <div slot="error" class="image-slot">
  25.                 <i class="el-icon-picture-outline"></i>
  26.               </div>
  27.             </el-image>
  28.           </div>
  29.         </el-form-item>
  30.         <div class="login-btn">
  31.           <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
  32.         </div>
  33.       </el-form>
  34.     </div>
  35.   </div>
  36. </template>
  38. <script>
  39. import LoginAjax from "@/utils/https/modules/Login.request.js";
  40. import { generateString, setSession } from "@/utils/utils.js";
  42. export default {
  43.   data() {
  44.     return {
  45.       adminTitle: "xxx 用户后台",
  46.       form: {
  47.         name: "",
  48.         password: "",
  49.         code: ""
  50.       },
  51.       rules: {
  52.         name: [{ required: true, message: "请输入用户名称", trigger: "blur" }],
  53.         password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  54.         code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
  55.       },
  56.       codeImage: "",
  57.       codeKey: generateString("xxxxxxxxxxx")
  58.     };
  59.   },
  60.   methods: {
  61.     // 刷新验证码
  62.     async refreshCode() {
  63.       try {
  64.         this.codeImage = "";
  65.         this.codeKey = generateString("xxxxxxxxxx");
  66.         this.codeImage = await LoginAjax.getCodeImage(this.codeKey);
  67.       } catch (error) {
  68.         this.$message.error(error);
  69.       }
  70.     },
  72.     // 登录
  73.     submitForm(formName) {
  74.       this.$refs[formName].validate(async valid => {
  75.         if (valid) {
  76.           try {
  77.             const { data, msg } = await LoginAjax.login({
  78.               key: this.codeKey,
  79.               ...this.form
  80.             });
  81.             setSession("xxxtoken", data);
  82.             this.$message.success(msg);
  83.             this.$router.push("/activity");
  84.           } catch (error) {
  85.             this.refreshCode();
  86.             this.form.code = "";
  87.             return false;
  88.           }
  89.         } else {
  90.           return false;
  91.         }
  92.       });
  93.     }
  94.   },
  95.   mounted() {
  96.     this.$nextTick(() => {
  97.       this.refreshCode();
  98.     });
  99.   }
  100. };
  101. </script>
  103. <style lang="scss" scoped>
  104.   // ...
  105. </style>