前言:根据用户名密码换取token成功后,将token存储到本地,以供其他页面获取,并能跳转到其他页面。本文举例从登录页面跳转到首页。
详见下方代码
一、登录页面
//js代码
$("#login").on("click",function(){
// 点击登录获取表单中的值
var username = $("#username").val();
var password = $("#password").val();
var data = {
username:username,
password:password
}
// 根据用户名密码获取token
$.ajax({
url:url+"/user/login",
method:"post",
data:JSON.stringify(data),
// 在jquery封装的ajax中发给后台的默认是查询字符串
contentType:"application/json",
success:function(res) {
// 将token存储到本地
localStorage.setItem('token',res.data.token)
// 请求成功后跳转到首页
location.href = '浏览器打开目的网页的地址'
}
})
// 阻止表单默认提交行为
event.preventDefault();
})
})
// body中代码
<form class="form_login">
用户名:<input id="username" type="text" name="username"><br>
密 码:<input id="password" type="password" name="password"><br>
<input id="login" type="submit" value="登录">
</form>
二、首页
跳转成功后,希望在首页获取到token,并把token设置到请求头中
// js代码
$(function() {
// 获取token
var token = localStorage.getItem('token')
// 将token设置到请求头headers中
$.ajaxSetup({
headers:{
'Authorization':token;
}
})
})
end