element admin 中的请求

首先配置好element admin 中的代理

为了解决后续跨域问题

devServer: {
        port: port,
        open: false,
        overlay: {
            warnings: false,
            errors: true
        },
        proxy: {
            '/dev-api': {
                target: '#####', //目标地址
                ws: true, //// 是否启用websockets
                changeOrigin: true, //开启代理：在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
                pathRewrite: {
                    '^/dev-api': ''
                }
            },
        },
        //mock 测试专用
        // before: require('./mock/mock-server.js')
    },

写一个登录请求

login.vue 填写表单后面，调用下面方法

      handleLogin() {
        this.loading = true
        this.$store.dispatch('user/login', this.loginForm).then((error) => {
          this.loading=false;
          this.$router.push({
            path: this.redirect || '/'
          });
          // 正常情况error 走catch ,这边采用后端
          this.errorMsg=error
          
        }).catch(() => {
          console.log("错误")
          this.loading = false;

        })
      },

andleLogin 提交给vuex 异步处理(user.js)

const action {
        login({ commit }, userInfo) {
        //接受传递参数，通过es 6 新语法取出 {a}=res;
        const { username, password } = userInfo
        return new Promise((resolve, reject) => {
            // 将json 字符串转化为x-from
            let user = querystring.stringify({ username: username.trim(), password: password })
            login(user).then(response => {

                if (response.respCode == 10000) {
                    const { respData } = response;
                    commit('SET_TOKEN', respData.sessionId)
                    setToken(respData.sessionId)
                }
                //向拦截器传递错误信息，可以选择性写
                let loginError = response.respData.fail;
                resolve(loginError);
            }).catch(error => {
                reject(error)
            })
        })
    },
}

登录api 如下

//这里request.js 中 后续在讲是admin 的请求拦截器
import request from '@/utils/request'

//login/login.vue 执行逻辑
export function login(data) {
    return request({
        url: '/manage/user/login',
        //此处admin是代理
        method: 'post',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        },
        data
    })
}

写一个获取用户信息接口

get 请求通过token获取相关用户信息

 "token": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJhdXRoMCIsImV4cCI6MTU5MDM2MDI2MywidXNlcm5hbWUiOiJoc2gifQ.KROTWi1Nm82C10TmiiMihkp9T3GhNMKegWx0s1rTrvc"

//具体业务可以根据实际情况删减
 getInfo({ commit, state }) {
        return new Promise((resolve, reject) => {
            getInfo(state.token).then(response => {


                const { respData } = response

                if (!respData) {
                    reject('认证失败，请重新登录')
                }

                const { roles, name, avatar, introduction } = respData

                // roles must be a non-empty array
                if (!roles || roles.length <= 0) {
                    reject('getInfo: roles must be a non-null array!')
                }

                commit('SET_ROLES', roles)
                commit('SET_NAME', name)
                commit('SET_AVATAR', avatar)
                commit('SET_INTRODUCTION', introduction);
                resolve(respData)
            }).catch(error => {
                reject(error)
            })
        })
    },

api 中user.js

export function getInfo(token) {
    return request({
        url: '###########',
        //此处admin是代理
        method: 'get',
        //baseURL: 'https://some-domain.com/api/',配置基本url
        params: { token }
    })
}

一个简单的get 请求获取token基本搭建完成，现在我们需要注意点，要将token配置到请求头

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

axios.defaults.headers.post['Content-Type'] = 'application/json;charset=utf-8';

// create an axios instance
const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: 10000 // request timeout
})

// request interceptor
//配置发送请求
service.interceptors.request.use(
    config => {

        config.headers.common.Authorization = getToken();
        return config
    },
    error => {
        // do something with request error
        console.log(error) // for debug
        return Promise.reject(error)
    }
)

// response interceptor
//配置接受请求
service.interceptors.response.use(
  
    response => {
        const res = response.data;
        // if the custom code is not 20000, it is judged as an error.
        if (res.respCode == 99999) {
            Message({
                message: res.respDesc || 'Error',
                type: 'error',
                duration: 5 * 1000
            })

        } else {
            return res
        }

    },
    error => {
        console.log('err' + error) // for debug
        Message({
            message: error.message,
            type: 'error',
            duration: 5 * 1000
        })
        return Promise.reject(error)
    }
)

export default service