vue中关于apI封装 搭建，注册登录 关于token的一些理解_vue中api中的下载接口的路径在哪里注册的

1.API封装

在 src下 新建API文件夹
1.在index.js 中配置axios：

var instances = null;
// 创建一个带自定义配置项的axios 实例
const instance = axios.create({
  // 所有请求的路径之前都会拼接地址
  baseURL: "url",
  // 延时时间
  timeout: "5000",
  // 请求头设置
  headers: { "X-Custom-Header": "foobar" },
});
1
2
3
4
5
6
7
8
9
10

2.新建文件constants.js 保存请求地址和方式

// 定义常量
const API = {
    METHODS:{
        POST:'post',
        GET:'get',
    },
    PATH:{
        LOGIN:"url",
    }
}
// 导出
export default API;
1
2
3
4
5
6
7
8
9
10
11
12
13

3.请求拦截和响应拦截

import Loading from "../components/loading/index";
//引入loading组件
import API from "./constants";
//引入定义的常量
instance.interceptors.request.use(
  (config) => {
    // 发送请求成功做出的操作
    // 弹出loading（加载中）控件
    console.log(Loading);
    instances = Loading.serve.open();
    // 拦截请求config配置 动态添加或者删除配置
    return config;
  },
  (err) => {
    //   console.log(err)
    // 发送请求错误 对请求出错的操作
    //
    // 提示用户请求失败并返回发送失败原因
    return Promise.reject(err);
  }
);
//axios设置响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 响应成功 对响应数据进行处理
    // 根据请求的服务器所响应的状态码进行对客户端的响应
    // 收起loading控件
    instances = Loading.serve.close();
    // 拦截处理响应结果，直接返回需要的数据
    return response.data;
  },
  (err) => {
    // 处理响应失败的数据
    return Promise.reject(err);
  }
);
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
34
35
36

4.封装请求的方法

// 封装请求的方法 导出
export function request(method, url, params) {
  switch (method) {
    case API.METHODS.POST:
      return post(url, params);
    case API.METHODS.GET:
      return get(url, params);
  }
}
1
2
3
4
5
6
7
8
9

5.配置请求路径的方法

// 最终的接口文件 
// 引入配置
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})
    },
 }
// 导出
export default APIClient;
1
2
3
4
5
6
7
8
9
10
11
12
13

API使用

在main.js文件中配置如下
javascript

// 配置api请求
import APIClient from "./API/index";
// 放入原型以供调用
Vue.prototype.$APIClient = APIClient;
1
2
3
4

使用时调用封装的函数即可

  mounted() {
 	// 调用函数
    this.$APIClient.login().then((res) => {
    // 保存请求成功的数据
      this.cates = res.data;
    });
  },
1
2
3
4
5
6
7

APP登录

1.token

在计算机身份认证中是令牌（临时）的意思，在词法分析中是标记的意思。一般作为邀请、登录系统使用。主要作用是确认用户的身份，帮助用户保护个人信息。
1

使用起来十分简单，只需要在发送登录请求时将后台返回的token令牌保存到本地就可以了

window.sessionStorage.setItem("token", data.data.remember_token);
1

一般使用的sessionStorage，相对于 localStorage来说更加的安全

2.token验证
获取token后需要验证在请求拦截中进行本地token的验证，如果存在将其存入到请求头中

serve.interceptors.request.use((config) => {
    // token验证请求
    let token = JSON.parse(window.sessionStorage.getItem("token"))
    if(token){
        config.headers.Authorization = `Bearer ${token}`
    }
    config.headers.deviceid = deviceid;
    config.headers.devicetype = "H5";
    return config
})
1
2
3
4
5
6
7
8
9
10

当用户没有进行登录时需要强制跳转到登录页面进行登录使用路由钩子进行跳转

if (!window.sessionStorage.getItem("token")) {
      next("/Login")
  }
1
2
3