• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
笑看人生458 显示全部楼层 发表于 2022-1-16 08:23:53 |阅读模式 打印 上一主题 下一主题
媒介

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

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


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

上面叙述了token的验证过程,那么对于token我们须要先把他存储到当地,然后每次哀求携带token,末了退出登录须要烧毁token。以是须要三个方法分别是:存储,拿到,烧毁
对于这三种方法,为了方便使用,我们对其举行封装
一样平常创建utils文件夹存放一些工具方法,在内里新建token.js文件
  1. export function setToken(tokenKey, token) { // 将token存入localStorage
  2.     return localStorage.setItem(tokenKey, token)
  3. }
  4. export function getToken(tokenKey) {        //拿到localStorage中的token
  5.     return localStorage.getItem(tokenKey)
  6. }
  7. export function removeToken(tokenKey) {  //退出登录时调用销毁token
  8.     return localStorage.removeItem(tokenKey)
  9. }
复制代码
如许一来,我们在使用token干系的方法就可以直接调用了,也方便后期维护修改
对于token方法的调用,我们一样平常封装在拦截器当中,继承往下看
axios的二次封装

在根目次新建一个名为service.js的文件,用来写干系的服务拦截器
导入axios和刚刚写好的token文件中的getoken方法
然后创建一个service,在内里设置对应的baseURL为 /api,timeout就是哀求凌驾多长时间就制止
这里的baseURL为 /api的缘故起因说一下:由于我这个项目在vue.config.js文件中设置了署理为/api处置惩罚跨域,必须类似才气找到我对应设置的api路径。这个文件跨域处置惩罚在链接文章中有讲-—》Vue前端处置惩罚跨域题目
  1. import axios from 'axios'
  2. import { getToken } from './utils/token'
  3. import { Message } from 'element-ui'
  4. const service = axios.create({
  5.     baseURL: '/api',
  6.     timeout: 3000
  7. })
复制代码
哀求拦截器

先写哀求拦截器,顾名思义,就是在发送哀求前我们须要做的事,比如将存在当地的token拿到,而且携带它发送哀求。接着上面的写代码
下面方法是axios的固定写法,config.headers设置哀求头,也就是这里须要在哀求头中携带token给后端举行验证
  1. service.interceptors.request.use((config) => {
  2.     // 在发送前做些什么
  3.     // 获取并设置token
  4.     // console.log(getToken('token'))
  5.     config.headers['token'] = getToken('token')
  6.     return config
  7. }, (error) => {
  8.     return Promise.reject(error)
  9. })
复制代码
相应拦截器

相应拦截器就是对后端返回的相应数据做一些事,比如这里对状态码举行判断,如果不为200,就使用Message的弹窗举行对应的提示,如许处置惩罚在项目全部的哀求中都能实现结果提示,克制每次哀求都重复写代码。
  1. service.interceptors.response.use((response) => {
  2.     // 对响应数据做些什么
  3.     let { status, message } = response.data
  4.     if (status !== 200) {
  5.         Message({type: 'warning', message: message || 'error'})
  6.     }
  7.     return response
  8. }, (error) => {
  9.     // 对响应错误做点什么
  10.     return Promise.reject(error)
  11. })
  12. export default service
复制代码
这里对axios举行二次封装,方便在哀求前和相应后做出对应的使用,末了别忘了在main.js中举行全局的设置
  1. import service from './service'
  2. Vue.prototype.service = service
复制代码
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作