目次
Vue全局拦截所有请求并在请求头中添加token在实际的项目中，为了登录的安全，token是必不可少的，以是就需要前后端共同，后端天生和验证token（这方面我也写过文章，报告后端对token的处理），前端在每一次请求中都要在请求头上加上token。 第一步：先讲一讲前端要对token做什么起首，当我们在登录页面输入账号暗码之后，点击登录，后端除了会验证账号暗码是否正确，还会天生token，然后将token与登录结果一起返回。 这时间前端就需要解析后端返回的数据，取到token，放到sessionStorage中。 下面就是我任意写的提交登录表单的方法 [code]//提交表单数据 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("权限不足：账号暗码错误") } }); }[/code]简单来说： 将token放入sessionStorage的操作的关键代码就是这一行： [code]sessionStorage.setItem("token",response.data.data.token);[/code]第二步：查看sessionStorage中是否保存了token
乐成将token保存到sessionStorage后，就可以开始拦截每次请求，将token放到请求头中了 第三步：找到vue项目中的main.js文件，并引入axios
第四步：在main.js中写相关的拦截请求的代码[code]// 添加请求拦截器 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) })[/code]上面是请求拦截器，实在还可以对响应进行拦截（无关紧要，可以不写，不影响请求拦截器的实现） [code]// 添加响应拦截器 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) })[/code]总结好了，以上就是"Vue:全局拦截所有请求，并在请求头中添加token"的全部内容了 这些仅为个人履历，希望能给大家一个参考，也希望大家多多支持脚本之家。 来源：https://www.jb51.net/javascript/326639qj9.htm 免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ |
|手机版|小黑屋|梦想之都-俊月星空
( 粤ICP备18056059号 )|网站地图
GMT+8, 2025-10-15 22:00 , Processed in 0.028777 second(s), 18 queries .
Powered by Mxzdjyxk! X3.5
© 2001-2025 Discuz! Team.
