axios网络请求

  • axios网络请求已关闭评论
  • 162 次浏览
  • A+
所属分类:Web前端
摘要

 ?问题 :如何添加token,解决鉴权问题  方案:通过登录页面,发送请求,获取到token值,并把token值存储(localStorage、sessionStorage、cookieStore),示例如下:

 ?问题 :如何添加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--