上一节在后端加上了token校验,这一节在前端请求里面加上token信息。
首先是在后端需要校验的视图类方法前加上登录校验类。
注意之前有个bug,我们加上token校验时候会赛user信息,格式为 {'status': True, 'data': {'username': 'lyl', 'exp': 1654618788}, 'error': None} 所以取username改下下面的方式。
前端页面需要在登录时候获取到token并且储存起来,储存使用cookie,在其他需要登录态接口里面请求时候请求头加上token。
看下登录请求:axios获取响应头没百度研究明白,明天找大佬问问,先放到响应体里。
注意看下axiosget请求和post请求头存放层级的不同。
geturl() {
axios.get('http://localhost:8000/api/geturl', {
headers: {
'content-type': 'application/json',
"AUTHORIZATION": 'jwt '+this.$cookies.get("login-token") //token换成从缓存获取
}}).then((response) => {
this.v_hrefs = response.data.all_href;
})
},
add_link() {
axios.post('http://localhost:8000/api/add_href/', {
new_link_name: this.new_link_name,
new_link_url: this.new_link_url
}, {
headers: {
'content-type': 'application/json',
"AUTHORIZATION": 'jwt '+this.$cookies.get("login-token") //token换成从缓存获取
}}).then(res => {
if (res.data.status == 200) {
this.$message.info('添加成功');
document.location.reload();
} else {
let self = this
self.$alert(res.data.error, '添加失败', {
confirmButtonText: '确定',
callback: action => { // eslint-disable-line no-unused-vars
document.location.reload();
}
})
}
}).catch(err => {
console.log('操作失败' + err);
})
}
如果没有加请求头token则会报错403,走到catch里。
等我研究下axios和djangorf响应头获取的问题。