文章目录
#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];
}
}
}