API封装和token设置_api改成tonken的形式

---

前言

在日常做项目请求接口时，在不同的组件都有不同的接口，要修改更换接口的时候要一个个找，太不方便了，这时候我们就需要封装API。

一、封装API有什么用？

封装API就相当于搞一个的文件或文件夹来统一管理你的接口路径，在你修改查询接口时更方便，也可以减少组件里的代码操作，是项目结构内容更加清晰。

---

二、关于token

1.什么是token？

token是服务端生成的一长串字符串。相当于一个通行令牌或是身份证，客户端想要请求到服务端数据时要通过这个令牌才能拿到，是对用户信息的一种保护 (主要是登录注册用得到)

2.为什么要用token？

Token 完全由应用管理，所以它可以避开同源策略
Token 可以避免 CSRF 攻击
Token 可以是无状态的，可以在多个服务间共享

3.如何设置token？

在接下来初步封装API 中会有具体代码操作

---

三、如何封装？

1.初步封装：(此处设置token)

现在src文件夹下创建一个utils文件夹，在里面创建一个request.js文件(文件/文件夹名任取)

• 引入axios
• 创建axios实例
• 设置请求拦截器和响应拦截器
• 导出

里面代码如下（示例）：

//先引入axios
import axios from 'axios'

// 创建一个axios实例，在这里设置你的共用地址，超时时间
const server  = axios.create({
    baseURL:"https://www.liulongbin.top:8888/api/private/v1/",
    timeout:'5000'
})

// 请求拦截器
// 这里可以设置请求头，token，loading
server.interceptors.request.use((config)=>{
    const token = window.sessionStorage.getItem("token")
    if(token){
        config.headers.Authorization = token
    }
    return config
})

//响应拦截器
// 设置token过时,结束loading等
server.interceptors.response.use((res)=>{
    if(res.data.meta.status==401){
        window.sessionStorage.removeItem("token")
        router.push('/login')
    }
    return res
})

// 导出
export default server


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

这时候直接在main.js中引入该文件，再在要请求接口的组件中使用就可以了，具体使用如下

main.js中：

 import http from './utils/request'
Vue.prototype.$http = http
1
2

组件中：

 methods: {
    // 获取列表
    async getList(){
    //此时已经设置了共用路径只需要接下来的路径和参数就能获取数据了
    //这里使用字符串拼接方法传参
      let {data} = await this.$http.get(`goods?query=${this.query}&pagenum=${num}&pagesize=${size}`)
     
      this.list=data.data.goods
      console.log(this.list)
    }}
1
2
3
4
5
6
7
8
9
10

2.进一步封装：

在创建一个文件，这里主要是用来封装请求数据的方法（get,post为例）和获取数据的方法

代码如下：

import request from "./request"

// get请求方式
export function gets(url,data){
    return request.get(url,{
        params:data
    })
}

// post请求方式
export function posts(url,data){
    return request.post(url,data)
}


export function getList(){
//这里就直接用了上面封装的get方法
    return gets('/goods')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

使用方法(还是获取之前的数据，效果一样):

 methods: {
    // 获取列表
    async getList(){
    //这里直接可以使用封装好的方法
      let {data} = await this.$http.getList({
      query:this.query
      })
      this.list=data.data.goods
      console.log(this.list)
    }}
1
2
3
4
5
6
7
8
9
10

---

总结

封装API 就是为了让你更好的管理你的接口请求，而token也能通过一种类似安全码的方式减轻服务器压力，提高开发效率

最后：以上是我对于AP封装和token的一些理解，如有不妥之处，还望不吝赐教。