axios网络请求

？问题 ：如何添加token,解决鉴权问题

方案：通过登录页面，发送请求，获取到token值，并把token值存储（localStorage、sessionStorage、cookieStore），示例如下：

//点击事件，注意下面对应的方法 登录 /*使用axios发送post请求请求地址url: http://12xxxxx8:18899/login/请求参数： username:test password:test123456*/// 使用前导入所需的依赖插件import { useWindowScroll } from ‘@vueuse/core’import axios from ‘axios’import qs from ‘qs’export default{ data(){ return{ loginForm:{ username:”, password:” } } }, methods:{
//axios发送post请求，传递form表单 async submitLogin(){ const params=qs.stringify(this.loginForm) const response = await axios.post(“http://121.4.107.148:18899/login/”,params) console.log(“response:”,response) if(response.status===200){ this.$message({ type:’success’, message:’登录成功！’ }) this.$router.push({name:’index’}) } },

//如何发送http请求，传递json参数 （任选其一） // ————————————————方法一———————————————- // (该方法是成功时的，失败时后面介绍处理）： async submitLogin1(){ const params={ username:this.loginForm.username, password:this.loginForm.password } const response = await axios.post(“http://121.4.107.148:18899/login/”,params) console.log(“response:”,response) if(response.status===200){ this.$message({ type:’success’, message:’登录成功！’ }) this.$router.push({name:’index’}) // 获取到token值 const token = response.data.token
// 下面三种保存token值位置方式（任选其一即可,亦可都保存） // 将token值保存到localStorage中 // window.localStorage.setItem(‘token’,token)
// 将token值保存到sessionStorage中 window.sessionStorage.setItem(‘token’,token)
// 将token值保存到cookieStore中 window.cookieStore.set(‘token’,token) } /* ====【扩展】===　　 三者的区别： localStorage:本地持久性保存，除非手动删除 sessionStorage：会话存储，浏览器关闭后删除 cookieStore：持久化存储，前后端分离的会存储cookie，但是获取不便 前后端不分离时，都会自带cookie */ },
// ————————————–方法二———————————– submitLogin2(){ console.log(‘点击了登录’,this.loginForm); const params ={ username:this.loginForm.username, password:this.loginForm.password } // 发送post请求 const res = axios.post(“http://121.4.107.148:18899/login/”,params) console.log(“res:”,res)
// 设置回调函数，接收返回的响应对象 // 异步操作成功时 执行的回调函数 res.then(response =>{ console.log(“请求成功”); console.log(“response”,response); })
// 异步回调失败时执行的回调函数 res.catch(error =>{ console.log(“请求失败”); console.log(“response:”,error.response); }) }}

–end–