vue3 + Element-plus 开发后台管理系统（11）

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

搭建登录架构解决方案与实现

上一篇中我们将 axios 进行了封装，今天我们就来研究请求的部分

封装请求动作

封装完 axios 模块后，我们接下来做的有两个部分

1、封住接口请求模块

2、封装登录请求模块

封装接口请求模块

创建 api 文件夹，创建 sys.js

import request from '@/utils/request'

/**
 * 登录
 */
export const login = data => {
  return request({
    // 请求路径根据实际情况来写
    url: '****',
    method: 'POST',
    data
  })
}

封装登录请求动作

该动作我们期望将其封装到 vuex 的 action 中

在 store 下创建 modules 文件夹，创建 user.js 模块，用于处理所有和用户相关的内容

import { login } from '@/api/sys'
// 对密码进行 md5 加密
import md5 from 'md5'
export default {
  namespaced: true,
  state: () => ({}),
  mutations: {},
  actions: {
    login(context, userInfo) {
      const { username, password } = userInfo
      return new Promise((resolve, reject) => {
        login({
          username,
          password: md5(password)
        })
          .then(data => {
            resolve()
          })
          .catch(err => {
            reject(err)
          })
      })
    }
  }
}

在 store/index 中完成注册

import { createStore } from 'vuex'
import user from './modules/user.js'
export default createStore({
  modules: {
    user
  }
})

登录触发动作

在 login 中，触发定义的 action

<template>
  <el-button
    type="primary"
    style="width: 100%; margin-bottom: 30px"
    :loading="loading"
    @click="handleLogin"
    >登录</el-button
  >
</template>
<script setup>
import { ref } from 'vue'
import { validatePassword } from './rules'
import { useStore } from 'vuex'

// 登录动作处理
const loading = ref(false)
const loginFromRef = ref(null)
const store = useStore()
const handleLogin = () => {
  loginFromRef.value.validate(valid => {
    if (!valid) return
    loading.value = true
    store
      .dispatch('user/login', loginForm.value)
      .then(() => {
        loading.value = false
        // TODO: 登录后操作
      })
      .catch(err => {
        console.log(err)
        loading.value = false
      })
  })
}
</script>

此时有可能会报出接口不存在的错误

出现这个问题的原因是因为我们在前面配置环境变量的时候指定了开发环境下，请求的 BaseUrl 为 /api，所以我们的真实发出的请求为：/api/**/**

这样的一个请求会被自动键入到当前前端所在的服务中，所以最终我们就得到了 http://http://192.168.199.10:8080/api/**/** 这样的一个请求路径

而想要处理这个问题，我们可以通过指定 webpack 的 DevServer 代理的形式，代理当前 url

配置这个代理其实也非常简单，可以说是一种固定的方案

在 vue.config.js 中进行配置

module.exports = {
  devServer: {
    // 配置反向代理
    proxy: {
      // 当地址中有/api的时候会触发代理机制
      '/api': {
        // 要代理的服务器地址  这里不用写 api
        target: '****',
        changeOrigin: true // 是否跨域
      }
    }
  },
}

重新启动即可请求成功