vue中封装服务器地址/接口与设置请求头

1. 设置请求头
   首先创建一个放置服务器地址的js,如http.js,然后在http.js中引入axios
   import axios from "axios";
   如果没有axios,需要先安装,npm i axios或者yarn add axois,然后重启服务器
   ...直接上代码

点击查看代码

import axios from "axios";  //导入axios

// 创建请求实例对象
const SERVER  = axios.create({
    baseURL:'ip',  //ip为你的服务器地址
    timeout:12000  //请求超时的时间
})
// 请求拦截器,在里面设置请求头
SERVER.interceptors.request.use((reqconfig)=>{
    // 在请求头进行授权,携带TOKRN给服务器,服务器验证后,根据TOKEN是否有效返回对应结果
    reqconfig.headers.Authorization = localStorage.token;  //这个token是我们在登录成功时获取的结果里面的token,将这个token 存入本地存储,然后在设置请求头时又将它拿出来
    return reqconfig;
})

export default SERVER  //将创建的实例对象保暴露出去,以便其他文件引入

我们在登录成功时会获取到类似这样一个结果

然后将里面的token存入本地存储
localStorage.token = res.data.token
token 的一般格式为Bearer eyJhbGciOi.....,但有时候后端可能不会在前面加Bearer,这个时候设置请求头时我们就手动加上,如:
reqconfig.headers.Authorization ="Bearer " + localStorage.token; //注意Bearer后面的空格不要漏掉
2.封装api接口
当我们设置好了请求头,封装好服务器地址后,就可以创建一个apis.js的文件,用来存放所有的接口,这样做的原因是方便维护,如果接口太多,那么每次请求时就要写很多冗余的代码,而且若接口有变,那维护起来是相当的不方便
....直接看代码

点击查看代码

import SERVER from 'xxxx'  //xxxx是你封装服务器地址文件的路径

//创建并导出接口
//export const 接口名 = (参数,没有参数就不写,保留括号) => SERVER.请求方式(get?post?..)('接口',参数(没有参数就不写))
export const $_login = (params) => SERVER.post('/users/checkLogin',params)
export const $_login = (params) => SERVER.get('/users/checkLogin',{params})
export const $_login = () => SERVER.get('/users/checkLogin')
//接口名若没有特殊要求,一般写成$_xxx的格式