vue保存后端发来的token+vue向后端发送网络请求携带token

#1.vue+axios保存后端发来的token

#1.1根据接口文档来保存

这是接口文档中后端返回的token数据和类型，以及过期时间

下面我将使用这个接口文档进行模拟token的保存和发送到后端

#1.2使用localstroage或者cookie或者sessionStroage保存token

1.下面我使用loaclStroage()来举例。
首先介绍一下localStroage()的使用方法。
存值:window.localStroage.setItem(“key”,“value”)
取值:window.localStroage.getItem(“key”)
介绍一下session.Stroage()的使用方法和loaclStroage()是一样的
存值:window.sessionStroage.setItem(“key”,“value”)
取值:window.sessionStroage.getItem(“key”)

this.axios({
     
          url:"",
          method:"post",
        })
        .then(function(res){
     
          //如果成功，直接保存
          //保存token的值，res是接收到后端返回的全部数据，使用res.access_token取出(其他同理)
          window.localStroage.setItem("access_token","res.access_token");
          window.localStroage.setItem("token_type","res.token_type");
          window.localStroage.setItem("expires_in","res.expires_in"); 
        }.bind(this))

最后我再说说cookie的使用
cookie是储存在用户本地终端上的数据。
　　在我们登陆网站时有记录密码，也有时间限制比如说7天，5天等等这都是我们利用cookie来写的，
　　这就是利用了cookie的会话周期，但cookie同时又是不安全的我们可以打开网页看到用户输入的密码，而且又是依赖于服务器环境的，
　　再写cookie时还要设置储存路径，而我们获取出来的值又是字符串，同时它又是非常小的，只有4kb,
　　下面我们来封装一下coookie

封装设置cookie：
　　function setCookie(name,value,iDay) {
       //传值为名，值，过期时间    if(iDay){ //如果有过期时间的话则执行这个条件
       var oDate=new Date(); //获取当且的事件戳
        oDate.setDate(oDate.getDate()+iDay); //设置过期事件
        document.cookie=name+"="+value+"; path=/; expires="+oDate;//设置cookie
    }else {
     //如果有过期时间的话则执行这个条件 设置cookie
        document.cookie=name+"="+value+"; path=/"; //名，值以及根目录
    }
}
 
获取cookie值

function getCookie(name) {
     
    var arr1=document.cookie.split("; ");  获取cookie值并且用”； “来进行切割成数组
    for(var i=0;i
        var arr2=arr1[i].split("="); //再次利用split（）方法进行切割为二维数组
        if(arr2[0]==name){
       //循环二维数组，当第一个值为你所传的值则返回本数组的第二个值
            return arr2[1];
        }
    }
    return " ";
}

删除cookie

function removeCookie(name) {
     
    setCookie("jack","1234",-1);  //再次调用setCookie,关键是把过期时间设置为负值
}

#2.vue+axios取出保存的token,向后端发送请求

首先看一下后端返回的token类型，以及token放在哪个地方进行携带到后端

然后我们再来模拟:以localStorage()为例,sessionStroage()一样

this.axios({
     
          url:"",
          method:"post",
        } 
        //配置请求头,在请求头中携带token
        headers: {
     
        //"Authorization" 与要求的请求头类型相同
        //'Bearer' 这个是token类型,也就是  localStorage.getItem("token_type")。 
             "Authorization":'Bearer'+localStorage.getItem("access_token");
 //如果是sessionStroage（）
           // "Authorization":'Bearer'+localStorage.getItem("access_token");            
 //如果是cookie,只保存了一个键值对，   如果是多值的话,看2.1使用封装的方法，逐个取出值即可.       
             "Authorization":'Bearer'+document.cookie
        })
        .then(function(res){
     
          //如果成功，直接保存
          
        }.bind(this))

#2.1使用cookie携带token(获取到之后，再进行传值即可)

2.封装一个获取 cookie 的方法

function getCookie( key ) {
     
var str = document.cookie; // 获取所有cookie
var arr = str.split("; "); // ["name=pengpeng", "age=18", "desc=shuai"]

// 遍历数组, 找出 键===key时的 value值
for ( var i = 0; i < arr.length; i++ ) {
     
var data = arr[i].split("="); // ["name", "pengpeng"]

if ( data[0] === key ) {
     
// 如果相等, 说明找到了
return data[1];
}

}

}

#3.如果这篇文章对你有帮助，请点个赞吧？有疑问或者我有写的不对的地方欢迎交流，指正。