axios网络请求

标签：axios console 请求 网络 token const response log

 ？问题 ：如何添加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:{
        //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);             })         } } </script>

 

 

 

 

 

 

--end--

 

标签：axios,console,请求,网络,token,const,response,log
From： https://www.cnblogs.com/suhongzhen/p/17247445.html