axios的封装

新建api文件夹 新建http.js

// 封装请求
import axios from 'axios'
import { ElMessage } from 'element-plus'
// 请求
const http = axios.create({
    baseURL: "https://www.liulongbin.top:8888/api/private/v1",
    timeout: 6000
})
// 请求拦截
http.interceptors.request.use(config => {
    //请求头设置
    let token = localStorage.getItem('token') || ''
    config.headers.Authorization = token
    return config
}, err => {
    console.log(err);
})
// 响应拦截
http.interceptors.response.use(arr => {
    // 对响应码的处理
    switch (arr.data.meta.status) {
        case 200:
            ElMessage({
                message: arr.data.meta.msg,
                type: 'success',
            })
            break;
        case 201:
            ElMessage({
                message: arr.data.meta.msg,
                type: 'success',
            })
            break;
        case 204:
            ElMessage({
                message: arr.data.meta.msg,
                type: 'success',
            })
            break;
        case 400:
            ElMessage({
                message: arr.data.meta.msg,
                type: 'warning',
            })
            break;
        case 401:
            ElMessage({
                message: arr.data.meta.msg,
                type: 'warning',
            })
            break;
        case 403:
            ElMessage({
                message: arr.data.meta.msg,
                type: 'warning',
            })
            break;
        case 404:
            ElMessage({
                message: arr.data.meta.msg,
                type: 'warning',
            })
            break;
        case 422:
            ElMessage({
                message: arr.data.meta.msg,
                type: 'warning',
            })
            break;
        case 500:
            ElMessage({
                message: arr.data.meta.msg,
                type: 'error',
            })
            break;
    }
    return arr.data.data
}, err => {
    console.log(err);
})
// 返出
export default http

新建request.js

// 封装请求参数
import http from './http.js'
 
function request({ method = "get", url, data = {}, params = {} }) {
    return http({
        method,
        url,
        data,
        params,
    })
}
 
export default request

新建请求接口 api.js

// 封装页面请求
import request from '@/utils/request.js'
 
// 登录 用户管理 权限管理页面的api请求
 
// 登录验证接口
export const addLogin = (data) => request({ url: '/login', method: "post", data, })
 
// 用户管理页面
// 用户数据列表
export const addUserList = (params) => request({ url: '/users', params, })
 
// 添加用户
export const addUser = (data) => request({ url: '/users', method: 'post', data })
 
// 修改用户信息
export const updateUserList = (data) => request({ url: '/users/' + data.id, data, method: 'put' })
 
// 删除用户的操作
export const removeUser = (data) => request({ url: '/users/' + data.id, data, method: 'delete' })
 
// 分配角色名称的操作
export const stateUserName = (data) => request({ url: '/users/' + data.id + '/role', data, method: 'put' })
 
// 改变角色状态的操作
export const userStateChange = (data) => request({ url: '/users/' + data.uId + '/state/' + data.type, data, method: 'put' })
 
// 搜索数据的操作
export const userSearch = (params) => request({ url: '/users', params })
 
// 权限管理页面
// 获取角色列表
export const addRoleList = () => request({ url: '/roles' })
 
// 删除角色的操作
export const removeUserList = (data) => request({ url: '/roles/' + data.id, method: 'delete' })
 
// 添加角色的操作
export const addRole = (data) => request({ url: '/roles', data, method: 'post' })
 
// 编辑角色的操作
export const updateRole = (data) => request({ url: "/roles/" + data.id, data, method: 'put' })
 
// 获取角色权限列表
export const usePowerList = (data) => request({ url: '/rights/' + data })
 
// 删除角色权限操作
export const removeUserPower = (data) => request({ url: '/roles/' + data.roleId + '/rights/' + data.rightId, method: 'delete' })