详解eladmin的login.js和request.js文件

request.js

这段代码是一个使用 Axios 库创建的网络请求服务：

1. 导入所需的模块和依赖：

   • axios：用于发送 HTTP 请求。
   • router：Vue.js 的路由器对象，用于路由导航。
   • Notification：Element UI 组件库中的通知组件，用于显示提示消息。
   • store：Vuex 的存储对象，用于状态管理。
   • getToken：一个用于获取身份验证令牌的辅助函数。
   • Config：应用程序的配置对象。
   • Cookies：用于处理浏览器的 Cookie 的库。

2. 创建 Axios 实例：

   const service = axios.create({
     baseURL: process.env.NODE_ENV === 'production' ? process.env.VUE_APP_BASE_API : '/',
     timeout: Config.timeout
   })
   

   • baseURL 是请求的基础 URL。根据当前环境是开发环境还是生产环境，使用不同的基础 API 地址。
   • timeout 是请求超时时间，表示请求在多久后若没有得到响应就会中断。

3. 请求拦截器：

   service.interceptors.request.use(
     config => {
       if (getToken()) {
         config.headers['Authorization'] = getToken()
       }
       config.headers['Content-Type'] = 'application/json'
       return config
     },
     error => {
       Promise.reject(error)
     }
   )
   

   请求拦截器用于在发送请求前对请求进行处理。这里的作用是：

   • 检查是否存在身份验证令牌，若存在则将其添加到请求头的 Authorization 字段中。
   • 设置请求的 Content-Type 为 JSON 格式。

4. 响应拦截器：

   service.interceptors.response.use(
     response => {
       return response.data
     },
     error => {
       // 错误处理逻辑
     }
   )
   

   响应拦截器用于在接收到响应后对响应进行处理。这里的作用是：

   • 返回响应对象的 data 字段，即实际的响应数据。

   如果在响应过程中发生错误，会执行错误处理逻辑。错误处理逻辑包括：

   • 检查错误响应的数据是否为 Blob 对5. 兼容处理 Blob 下载出错的 JSON 提示：

   if (error.response.data instanceof Blob && error.response.data.type.toLowerCase().indexOf('json') !== -1) {
     // 处理 Blob 类型的错误响应
     // ...
   }
   

   这段代码判断错误响应的数据类型是否为 Blob，并且判断其 MIME 类型是否包含 “json”。如果满足条件，则执行相应的处理逻辑。

   • 通过 FileReader 对象读取 Blob 数据，并将其解析为文本。
   • 解析后的文本通常是一个 JSON 字符串，其中包含错误消息。
   • 使用 Element UI 的通知组件 Notification 显示错误消息。

5. 处理其他类型的错误响应：

   else {
     let code = 0
     try {
       code = error.response.data.status
     } catch (e) {
       // 处理超时错误
       // ...
     }
     console.log(code)
     if (code) {
       // 根据不同的错误码执行相应的操作
       // ...
     } else {
       // 显示通用的接口请求失败提示
       // ...
     }
   }
   

   • 如果错误响应不是 Blob 类型或不包含 JSON 数据，会进入该分支。
   • 首先尝试获取错误响应中的状态码，并将其赋值给变量 code。
   • 如果获取状态码成功，则根据不同的状态码执行相应的操作。
   • 如果获取状态码失败，说明可能是请求超时的错误，此时会执行超时错误的处理逻辑。
   • 在控制台打印错误码（用于调试）。
   • 如果没有特定的错误码，显示一个通用的接口请求失败的提示。

6. 导出创建的 Axios 实例：

   export default service
   

   该实例可以被其他模块导入并使用，以发送网络请求。

总结：这段代码创建了一个基于 Axios 的网络请求服务，包含了请求拦截器和响应拦截器，用于处理请求和响应的相关操作。它还处理了特定类型的错误响应，并根据不同的错误码执行相应的操作或显示相应的提示信息。最后，通过导出默认的 Axios 实例，可以在其他模块中使用该服务发送网络请求。

login.js

这段代码是一个使用 request 函数发送网络请求的文件，并定义了几个具体的请求函数。让我们逐个函数来分析它们的作用：

1. login(username, password, code, uuid):

   • 发送登录请求的函数。
   • 使用 request 函数发送 POST 请求到 auth/login 接口。
   • 请求的参数包括 username（用户名）、password（密码）、code（验证码）和 uuid（唯一标识符）。
   • 返回一个 Promise 对象，用于处理登录请求的结果。

2. getInfo():

   • 发送获取用户信息请求的函数。
   • 使用 request 函数发送 GET 请求到 auth/info 接口。
   • 该接口用于获取当前登录用户的详细信息。
   • 返回一个 Promise 对象，用于处理获取用户信息请求的结果。

3. getCodeImg():

   • 发送获取验证码图片请求的函数。
   • 使用 request 函数发送 GET 请求到 auth/code 接口。
   • 该接口用于获取登录页面的验证码图片。
   • 返回一个 Promise 对象，用于处理获取验证码图片请求的结果。

4. logout():

   • 发送退出登录请求的函数。
   • 使用 request 函数发送 DELETE 请求到 auth/logout 接口。
   • 该接口用于注销当前登录用户。
   • 返回一个 Promise 对象，用于处理退出登录请求的结果。

总结：这段代码定义了几个请求函数，用于发送特定的网络请求。每个函数使用 request 函数来发送具体的请求，指定了请求的 URL、请求方法和数据。这些函数返回 Promise 对象，可用于处理请求的结果。通过导入 request 函数，可以在其他模块中使用这些请求函数来发送相应的网络请求。

参考文章：

https://blog.csdn.net/u011262253/article/details/124802231