Vue项目实战中token和axios的二次封装使用,一起来写出优雅的项目结构
Posted 北海的大鱼
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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的二次封装使用,一起来写出优雅的项目结构的主要内容,如果未能解决你的问题,请参考以下文章