diff --git a/src/api/auth.js b/src/api/auth.js new file mode 100644 index 0000000..11e9da3 --- /dev/null +++ b/src/api/auth.js @@ -0,0 +1,30 @@ + +/** + *axios封装使用实例 + * + */ + +import request from '@/utils/request' +// 对应request.js export default request 可更改默认的baseURL +// const api = request.create({ baseURL: 'http://localhost:8081' }) + +// **全局唯一 Axios 实例** +// 对应request.js export default (params) => Factory(params) +// const api = request({ baseURL: 'http://localhost:8080' }) + +// 示例请求 +// export function login (params) { +// return request({ +// url: '/auth/login', +// method: 'post', +// data: params +// }) +// } +// 示例请求 +// export const login = (params) => api.post('/auth/login', params) +// export const login = (params) => request.post('/auth/login', params) + +// 用户登入 +export const login = (params) => request.post('/auth/login', params) +// 用户注册 +export const register = (params) => request.post('/auth/register', params) diff --git a/src/api/user.js b/src/api/user.js new file mode 100644 index 0000000..acdabf1 --- /dev/null +++ b/src/api/user.js @@ -0,0 +1,10 @@ +import request from '@/utils/request' + +// 示例请求 +export function getUserInfo () { + return request({ + url: '/user/info', + method: 'get' + }) +} +export const login = (userData) => request.post('/users', userData) diff --git a/src/main.js b/src/main.js index 7636168..4d988fa 100644 --- a/src/main.js +++ b/src/main.js @@ -4,9 +4,6 @@ import 'element-plus/dist/index.css' import App from './App.vue' import router from './router' import store from './store' -import axios from 'axios' - -axios.defaults.baseURL = 'http://localhost:8080' const app = createApp(App) app.use(store) diff --git a/src/utils/request.js b/src/utils/request.js new file mode 100644 index 0000000..e2e3f53 --- /dev/null +++ b/src/utils/request.js @@ -0,0 +1,74 @@ + +/** + *axios封装实例 + */ + +// 第一步我们先引入axios模块 +import axios from 'axios' + +// 这里的话有token的需求我们可以获取一下token，方便我们进行请求的时候使用 +function getToken () { + // 这里可以根据你项目具体来获取 + const token = window.sessionStorage.getItem('token') + return token || '' +} +// 第二步我们创建一个axios实例对象,然后用函数Factory封装一下 +function Factory ({ baseURL, code, msg, callFail }) { + const $http = axios.create({ + baseURL, + timeout: 1000 * 60 * 5 // 超时时间 + }) + // 请求拦截器,我们可以在请求拦截器中设置token,或者对请求进行一些处理 + $http.interceptors.request.use( + (config) => { + // 这里我们可以设置token + const token = getToken() + if (token) { + config.headers.Authorization = token + } + return { + headers: { + // 这里我们还可以设置请求头 + 'Content-Type': 'application/json;charset=UTF-8' + // ...... + }, + ...config, + validateStatus: (status) => { + // 这里我们设置状态码的判断条件，如果返回的状态码在200到300之间就表示请求成功，否则就是失败 + return (status >= 200 && status < 300) || status === 401 + } + } + }, + (error) => { + // 这里我们处理请求错误 + return Promise.reject(error) + } + ) + // 响应拦截器,我们可以在响应拦截器中返回的数据或者错误信息进行处理 + $http.interceptors.response.use((response) => { + // 这里我们处理响应数据 + const data = response.data + if (+data.code === 200 || +data.code === 0) { + return data + } else if (+data.code === 401) { + console.error('请求报错提示：token失效，请重新登录') + } else { + console.error('请求报错提示：', data, msg || '请求失败') + } + return Promise.reject(data.msg || '请求失败') + }, + error => { + // 这里我们处理响应错误 + console.error('请求报错提示：', error, msg || '请求失败') + return Promise.reject(error) + }) + return $http +} +// 默认导出一个 `request` 方法，同时支持创建 `api` 实例 +const request = Factory({ baseURL: 'http://localhost:8080' }) + +// 第三步我们导出axios实例对象 +export default request + +// export default (params) => Factory(params)() // 不理解 +// export default (params) => Factory(params) // 为什么上面的不能用 diff --git a/src/views/auth/Login.vue b/src/views/auth/Login.vue index 7660b71..eb42c51 100644 --- a/src/views/auth/Login.vue +++ b/src/views/auth/Login.vue @@ -63,6 +63,7 @@