草庐IT

axios网络请求

给天使看的戲 2023-03-28 原文

 ？问题 ：如何添加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--

 

axios网络nbspdivtokenVue

有关axios网络请求的更多相关文章

  1. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

    在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

  2. ruby - 用 Ruby 编写一个简单的网络服务器 - 2

    我想在Ruby中创建一个用于开发目的的极其简单的Web服务器(不，不想使用现成的解决方案)。代码如下:#!/usr/bin/rubyrequire'socket'server=TCPServer.new('127.0.0.1',8080)whileconnection=server.acceptheaders=[]length=0whileline=connection.getsheaders想法是从命令行运行这个脚本，提供另一个脚本，它将在其标准输入上获取请求，并在其标准输出上返回完整的响应。到目前为止一切顺利，但事实证明这真的很脆弱，因为它在第二个请求上中断并出现错误:/usr/b

  3. jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2

    rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送

  4. 网络编程套接字 - 2

    网络编程套接字网络编程基础知识理解源`IP`地址和目的`IP`地址理解源MAC地址和目的MAC地址认识端口号理解端口号和进程ID理解源端口号和目的端口号认识`TCP`协议认识`UDP`协议网络字节序socket编程接口`sockaddr``UDP`网络程序服务器端代码逻辑：需要用到的接口服务器端代码`udp`客户端代码逻辑`udp`客户端代码`TCP`网络程序服务器代码逻辑多个版本服务器单进程版本多进程版本多线程版本线程池版本服务器端代码客户端代码逻辑客户端代码TCP协议通讯流程TCP协议的客户端/服务器程序流程三次握手（建立连接）数据传输四次挥手（断开连接）TCP和UDP对比网络编程基础知识

  5. ruby - HTTP 请求中的用户代理，Ruby - 2

    我是Ruby的新手。我试过查看在线文档，但没有找到任何有效的方法。我想在以下HTTP请求botget_response()和get()中包含一个用户代理。有人可以指出我正确的方向吗？#PreliminarycheckthatProggitisupcheck=Net::HTTP.get_response(URI.parse(proggit_url))ifcheck.code!="200"puts"ErrorcontactingProggit"returnend#Attempttogetthejsonresponse=Net::HTTP.get(URI.parse(proggit_url)

  6. ruby-on-rails - 获取并发布相同匹配项的请求 - 2

    在我的路线文件中我有:match'graphs/(:id(/:action))'=>'graphs#(:action)'如果是GET请求(工作)或POST请求(不工作)，我想匹配它我知道我可以使用以下方法在资源中声明POST请求:post'/'=>:show,:on=>:member但是我怎样才能为比赛做到这一点呢？谢谢。 最佳答案 如果你同时想要POST和GETmatch'graphs/(:id(/:action))'=>'graphs#(:action)',:via=>[:get,:post]编辑默认值可以设置如下match'g

  7. ruby - 检查网络文件是否存在，而不下载它？ - 2

    是否可以在不实际下载文件的情况下检查文件是否存在？我有这么大的(~40mb)文件，例如:http://mirrors.sohu.com/mysql/MySQL-6.0/MySQL-6.0.11-0.glibc23.src.rpm这与ruby​​不严格相关，但如果发件人可以设置内容长度就好了。RestClient.get"http://mirrors.sohu.com/mysql/MySQL-6.0/MySQL-6.0.11-0.glibc23.src.rpm",headers:{"Content-Length"=>100} 最佳答案

  8. ruby - 404 未找到，但可以从网络浏览器正常访问 - 2

    我在这方面尝试了很多URL，在我遇到这个特定的之前，它们似乎都很好:require'rubygems'require'nokogiri'require'open-uri'doc=Nokogiri::HTML(open("http://www.moxyst.com/fashion/men-clothing/underwear.html"))putsdoc这是结果:/Users/macbookair/.rvm/rubies/ruby-2.0.0-p481/lib/ruby/2.0.0/open-uri.rb:353:in`open_http':404NotFound(OpenURI::HT

  9. ruby-on-rails - 如何在 ActionController::TestCase 请求中设置内容类型 - 2

    我试图像这样在我的测试用例中执行获取:request.env['CONTENT_TYPE']='application/json'get:index,:application_name=>"Heka"虽然，它失败了:ActionView::MissingTemplate:Missingtemplatealarm_events/indexwith{:handlers=>[:builder,:haml,:erb,:rjs,:rhtml,:rxml],:locale=>[:en,:en],:formats=>[:html]尽管在我的Controller中我有:respond_to:html,

  10. 深度学习12. CNN经典网络 VGG16 - 2

    深度学习12.CNN经典网络VGG16一、简介1.VGG来源2.VGG分类3.不同模型的参数数量4.3x3卷积核的好处5.关于学习率调度6.批归一化二、VGG16层分析1.层划分2.参数展开过程图解3.参数传递示例4.VGG16各层参数数量三、代码分析1.VGG16模型定义2.训练3.测试一、简介1.VGG来源VGG（VisualGeometryGroup）是一个视觉几何组在2014年提出的深度卷积神经网络架构。VGG在2014年ImageNet图像分类竞赛亚军，定位竞赛冠军；VGG网络采用连续的小卷积核（3x3）和池化层构建深度神经网络，网络深度可以达到16层或19层，其中VGG16和VGG

随机推荐