关于app封装搭建以及登入token的设置

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、搭建脚手架，创建基本目录

以上是一个vue.3.0标准目录结构

1.man.js

man.js是一个全局文件，我们引入的一些插件都可以在里面引入，这样脚手架才可以去使用

import router from './router'  //引入路由
import store from './store'    //vuex
// 引入rem
import './util/rem'
// 引入过滤器
import './util/filters'

二、公共请求头和API分装

1.公共请求头

1.创建 axios，设置 baseURL 与超时时间
2.拦截请求
3.拦截响应
4.路由拦截

代码如下（示例）：

import axios from 'axios'

const instance = axios.create({
    baseURL:'http://120.53.31.103:84',
    timeout: "5000"
})

// 请求拦截器
instance.interceptors.request.use((config)=>{
    return config
})

// 响应拦截器
instance.interceptors.response.use((res)=>{
    return res
})

// 将新创建的一个axios导出
export default instance

2.API分装

将请求数据接口统一放到一个js文件里，方便我们管理。
可以设置请求方式
代码如下（示例）：

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 ajaxCityGuess(){
    return gets('/')
}

三、关于登录的token设置

1.token的定义

Token是服务端生成的一串字符串，以作客户端进行请求的一个令牌，当第一次登录后，服务器生成一个Token便将此Token返回给客户端，以后客户端只需带上这个Token前来请求数据即可，无需再次带上用户名和密码。

2.使用Token的目的

Token的目的是为了减轻服务器的压力，减少频繁的查询数据库，使服务器更加健壮。
代码如下（示例）：

// 请求拦截器
instance.interceptors.request.use((config)=>{
    const token = window.sessionStorage.getItem('token')
    if (token ) { // 判断是否存在token，如果存在的话，则每个http header都加上token
        config.headers.authorization = `Bearer${token}`   //请求头加上token
    }
    return config
})

---

总结

以上是个人对开发中创建项目和使用token登入的一点总结，如有叙述不当之处请指正，我将及时改正并感谢，我知道还有更多更好的使用方式，我在这里只是抛砖引玉，希望大家将您的使用方式提出来，我们一起讨论，学习，一起进步，同时也为像我一样对这方面理解薄弱的朋友提供点帮助，谢谢。