Vue项目实战中token和axios的二次封装使用，一起来写出优雅的项目布局

显示全部楼层

媒介

token通常在管理体系中用来举行身份和权限验证，各人应该都不陌生，这篇文章教各人对token和axios举行封装，保持项目结构精良的可读性，对token比力陌生的同砚，那就赶紧学起来吧~
什么是token

token是对用户举行登录验证的一串密钥，它由后端天生，一样平常前端举行登录验证通事后就会得到后端返回过来的token，后期的一些使用哀求也须要携带token来包管接口安全
token身份验证的过程

前端发送登录哀求
哀求乐成，拿到token，存入当地localstorage中
发送哀求携带token，后端验证token返回结果
退出登录，烧毁token

token 的封装

上面叙述了token的验证过程，那么对于token我们须要先把他存储到当地，然后每次哀求携带token，末了退出登录须要烧毁token。以是须要三个方法分别是：存储，拿到，烧毁
对于这三种方法，为了方便使用，我们对其举行封装
一样平常创建utils文件夹存放一些工具方法，在内里新建token.js文件

export function setToken(tokenKey, token) { // 将token存入localStorage
    return localStorage.setItem(tokenKey, token)
}
export function getToken(tokenKey) {        //拿到localStorage中的token
    return localStorage.getItem(tokenKey)
}
export function removeToken(tokenKey) {  //退出登录时调用销毁token
    return localStorage.removeItem(tokenKey)
}
复制代码

如许一来，我们在使用token干系的方法就可以直接调用了，也方便后期维护修改
对于token方法的调用，我们一样平常封装在拦截器当中，继承往下看
axios的二次封装

在根目次新建一个名为service.js的文件，用来写干系的服务拦截器
导入axios和刚刚写好的token文件中的getoken方法
然后创建一个service，在内里设置对应的baseURL为 /api，timeout就是哀求凌驾多长时间就制止
这里的baseURL为 /api的缘故起因说一下：由于我这个项目在vue.config.js文件中设置了署理为/api处置惩罚跨域，必须类似才气找到我对应设置的api路径。这个文件跨域处置惩罚在链接文章中有讲-—》Vue前端处置惩罚跨域题目

import axios from 'axios'
import { getToken } from './utils/token'
import { Message } from 'element-ui'
const service = axios.create({
    baseURL: '/api',
    timeout: 3000
})
复制代码

哀求拦截器

先写哀求拦截器，顾名思义，就是在发送哀求前我们须要做的事，比如将存在当地的token拿到，而且携带它发送哀求。接着上面的写代码
下面方法是axios的固定写法，config.headers设置哀求头，也就是这里须要在哀求头中携带token给后端举行验证

service.interceptors.request.use((config) => {
    // 在发送前做些什么
    // 获取并设置token
    // console.log(getToken('token'))
    config.headers['token'] = getToken('token')
    return config
}, (error) => {
    return Promise.reject(error)
})
复制代码

相应拦截器

相应拦截器就是对后端返回的相应数据做一些事，比如这里对状态码举行判断，如果不为200，就使用Message的弹窗举行对应的提示，如许处置惩罚在项目全部的哀求中都能实现结果提示，克制每次哀求都重复写代码。

service.interceptors.response.use((response) => {
    // 对响应数据做些什么
    let { status, message } = response.data
    if (status !== 200) {
        Message({type: 'warning', message: message || 'error'})
    }
    return response
}, (error) => {
    // 对响应错误做点什么
    return Promise.reject(error)
})
export default service
复制代码

这里对axios举行二次封装，方便在哀求前和相应后做出对应的使用，末了别忘了在main.js中举行全局的设置

import service from './service'
Vue.prototype.service = service
复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

工作时间

工作时间

Vue项目实战中token和axios的二次封装使用，一起来写出优雅的项目布局

火星云矿 | 预约S19Pro，享500抵1000！