axios网络请求
？问题 ：如何添加token,解决鉴权问题
方案：通过登录页面，发送请求，获取到token值，并把token值存储（localStorage、sessionStorage、cookieStore），示例如下：
<template>
<el-form label-width="80px">
<el-form-item label="用户名">
<el-input v-model="loginForm.username"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input type='password' v-model="loginForm.password"></el-input>
</el-form-item>
//点击事件，注意下面对应的方法
<el-button style="width: 100%;" type="primary" @click="submitLogin1" >登录</el-button>
</el-form>
</template>
<script>
/*使用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:{
async submitLogin(){
// 利用封装的login方法，发送登录请求（/api/index.js 文件中）
const response = await this.$api.login(this.loginForm)
if(response.status===200){
this.$message({
type:'success',
message:'登录成功！'
})
// 获取到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)
//正确跳转首页面
this.$router.push({name:'index'})
}
},
//axios发送post请求，传递form表单
async submitLogin(){
const params=qs.stringify(this.loginForm)
const response = await axios.post("http://.4..1xx8: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://xxx.4.xx07.xxx8: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://xxx.4.xxx.1xxx8: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);
})
}
}
</script>
--end--