关于API封装搭建，注册登录和Token的理解

一、为什么要封装API？

简化使用成本。封装是针对项目来说的，我们可以给定请求的主域名、请求头等默认值、减少使用请求时的需要传的参数和其他配置等

二、怎么封装API?

现在根目录中的src文件中设置API文件，在API文件中设置以下文件

1.先创建一个core.js核心文件

在这里可以设置请求拦截、响应拦截

代码如下（示例）：

import axios from "axios";
import API from "./constants";

//带配置项的axios实例
const instance = axios.create({
  baseURL: 'https://api.it120.cc/small4',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  //弹起loading控件
  //拦截请求config配置 动态添加或者删除配置
  return config;
}, function (error) {
  // 对请求错误做些什么
  //提示用户请求发送失败原因  
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  //对自身服务器响应的状态码进行处理
  //收起loading控件
  //对响应数据做初步处理
  return response;
}, function (error) {
  // 对响应错误做点什么
  return Promise.reject(error);
});


export function request(method,url,params){
  switch(method){
    case API.METHODS.GET:
      return get(url,params)
    case API.METHODS.POST:
      return post(url,params)
  }
}

//封装get请求方法
function get(url,params){
  return instance.get(url,params)
}
//封装post请求方法
function post(url,params){
  return instance.post(url,params)
}

2.创建配置文件config.js文件

在这里设置请求方式和请求路径具体域名

const API ={
  METHODS:{
    POST:"post",
    GET:"get"
  },
  PATH:{
    LOGIN:"user/m/login?deviceId=007&deviceName=monkey",
    REGISTER:"/user/m/register"
  }
}

export default API;

3.设置index.js接口文件

代码如下（示例）：

import {request} from "./core";//引入核心文件中封装的请求方法
import API from "./constants";

const  APIClient = {
//实例化方法
  login(username,password){//传递参数
    return request(API.METHODS.POST,API.PATH.LOGIN,{username:username,password:password});
  },
  
  register(){
    return request(API.METHODS.POST,API.PATH.REGISTER,{});
  },
}

export default APIClient;

4.在main.js中暴露全局

//引入
import APIClient from "./API/index";
//暴露全局
Vue.prototype.$APIClient = APIClient;

这样就可以在项目里使用了🐱‍🐉🐱‍🐉🐱‍🐉

5.使用方法

this.$APIClient.login('传递参数').then(res=>{'进行操作'})

总结

总之使用封装API可以让我们的代码更简洁、方便维护，
最后index.js是实际用到的请求地址，config.js是url地址存放的地方，core.js是封装axios的地方

---

二、注册登录和Token

1.注册登录

注册登录，是一个网站必备的，因为一个网站需要很多人访问，如果这些人只能看不能进行操作的话，用户体验是极差的，但是每个人都留言的话有需要区分和管理每个人所说的话和留言，以及进行的操作，所以我们给每一个人设置一个标识，但是这样的方式安全性极差，所以我们需要让用户自己定义一个账号和密码然后系统去识别，每个人之间可以交流，但又不会被窃取信息，为了实现这样的方式，就有了注册登录！

2.token的作用

token是由后台判断用户登录后返回给前端，用来判断用户身份的也是用户的唯一标识符，只有token存在才能进行一些页面的访问和数据的请求！

3.token做了什么

token主要验证了用户身份，区别管理信息，从而达到每个token对应一个用户，同时也了解了用户操作痕迹，如果说ID是身份证的话，那么token就是你的门禁卡或者钥匙，只有token存在的时候你在能进入下一个页面的门！