Vue全局拦截所有请求并在请求头中添加token方式

 更新时间:2024年08月28日 16:21:16   作者:三七有脾气  
这篇文章主要介绍了Vue全局拦截所有请求并在请求头中添加token方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue全局拦截所有请求并在请求头中添加token

在实际的项目中,为了登录的安全,token是必不可少的,所以就需要前后端配合,后端生成和验证token(这方面我也写过文章,讲述后端对token的处理),前端在每一次请求中都要在请求头上加上token。

第一步:先讲一讲前端要对token做什么

首先,当我们在登录页面输入账号密码之后,点击登录,后端除了会验证账号密码是否正确,还会生成token,然后将token与登录结果一起返回。

这时候前端就需要解析后端返回的数据,取到token,放到sessionStorage中

下面就是我随便写的提交登录表单的方法

//提交表单数据
    submitForm(formName) {
      const that = this
      axios({
        method: "post",
        url: connectUrl+":10003/login/acount",
        data:{
          userName:this.ruleForm.userName,
          password:this.ruleForm.password,
          option:0,
          loginTime:new Date()
          } 
      }).then(function(response){
            if(response.data.code === 200){
              sessionStorage.setItem("token",response.data.data.token);
              sessionStorage.setItem("userName",response.data.data.userName);
            that.$router.push({
                name:'index'
                })
            that.$message.success("登录成功")
          }else{
            that.$message.error("权限不足:账号密码错误")
          }
          
      });
    }

简单来说:

将token放入sessionStorage的操作的关键代码就是这一行:

sessionStorage.setItem("token",response.data.data.token);

第二步:查看sessionStorage中是否保存了token

成功将token保存到sessionStorage后,就可以开始拦截每次请求,将token放到请求头中了

第三步:找到vue项目中的main.js文件,并引入axios

第四步:在main.js中写相关的拦截请求的代码

// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  // 判断是否存在token,如果存在将每个页面header添加token
  if (sessionStorage.getItem("token")) {
    config.headers.common['Authorization'] = sessionStorage.getItem("token");
  }
  return config
}, function (error) {
  router.push('/login')
  return Promise.reject(error)
})

上面是请求拦截器,其实还可以对响应进行拦截(可有可无,可以不写,不影响请求拦截器的实现)

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response
}, function (error) {
  // 对响应错误做点什么
  if (error.response) {
    switch (error.response.status) {
      case 401:
        store.commit('del_token')
        router.push('/login')
    }
  }
  return Promise.reject(error)
})

总结

好了,以上就是"Vue:全局拦截所有请求,并在请求头中添加token"的全部内容了

这些仅为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue生命周期和react生命周期对比【推荐】

    vue生命周期和react生命周期对比【推荐】

    本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-09-09
  • 解决Vue调用springboot接口403跨域问题

    解决Vue调用springboot接口403跨域问题

    这篇文章主要介绍了解决Vue调用springboot接口403跨域问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Vue配置代理(devServer)解决跨域问题

    Vue配置代理(devServer)解决跨域问题

    这篇文章主要介绍了Vue配置代理(devServer)解决跨域问题,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-08-08
  • Vue 可拖拽组件Vue Smooth DnD的使用详解

    Vue 可拖拽组件Vue Smooth DnD的使用详解

    最近需要有个拖拽列表的需求,发现一个简单好用的 Vue 可拖拽组件,本文主要介绍了可拖拽组件Vue Smooth DnD的使用,感兴趣的可以了解一下
    2021-07-07
  • 基于Vue3实现SSR(服务端渲染)功能

    基于Vue3实现SSR(服务端渲染)功能

    在现代网页开发中,用户体验日益成为网站成功的重要因素,从加载时间到SEO优化,越来越多的开发者开始关注使用服务端渲染(SSR)来提升应用的表现,本文将深入探讨 Vue 3 的 SSR 特性,并以示例代码展示如何实现这一功能,需要的朋友可以参考下
    2024-11-11
  • 关于pinia的简单使用方式

    关于pinia的简单使用方式

    这篇文章主要介绍了关于pinia的简单使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • vue2.0使用swiper组件实现轮播的示例代码

    vue2.0使用swiper组件实现轮播的示例代码

    下面小编就为大家分享一篇vue2.0使用swiper组件实现轮播的示例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • uniapp微信小程序WebApi_openid、phone接口获取代码详解

    uniapp微信小程序WebApi_openid、phone接口获取代码详解

    本文主要记录了微信小程序接口调用的过程,首先查看uniapp文档和微信API文档,获取openid和phone,然后通过uniapp实现获取openid和电话号码,但遇到了合法域名屏蔽的问题,最后通过将微信访问迁移到后台解决,需要的朋友可以参考下
    2024-10-10
  • vant-list上拉加载onload事件触发多次问题及解决

    vant-list上拉加载onload事件触发多次问题及解决

    这篇文章主要介绍了vant-list上拉加载onload事件触发多次问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-01-01
  • vue实现移动端div拖动效果

    vue实现移动端div拖动效果

    这篇文章主要为大家详细介绍了vue实现移动端div拖动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03

最新评论