从零搭建一个django项目-11.5-token请求判断优化

怪盗LYL

发布于 2022-06-13 13:26:46

3250

发布于 2022-06-13 13:26:46

通过搜索引擎搜索了下axios怎么获取响应头，总结下就是浏览器只能访问默认的响应头，如果需要获取自定义的响应头需要在响应头里设置Access-Control-Expose-Headers。
刚开始时候我看的有点蒙，后来我发现了其实原理就是在响应头加一个Access-Control-Expose-Headers字段，它的value值就是自定义的响应头字段。

return Response({"all_href":all_href},headers={"token":"token","a":"a","Access-Control-Expose-Headers":"token,a"})

value值使用逗号隔开，这里我设置了自定义变量token和a，然后在前端获取headers打印看看。

geturl() { axios.get('http://localhost:8000/api/geturl').then((response) => { console.log(response.headers) this.v_hrefs = response.data.all_href; }).catch(err => { console.log('操作失败' + err); }) }

可以看到打印了token和a两个字段，现在我们把自定义设置里面的a去掉：

returnResponse({"all_href":all_href},headers={"token":"token","a":"a","Access-Control-Expose-Headers":"token"})

然后重新打印下：

- 可以看到a字段没了，嘿嘿~
刚刚只是测试下返回响应头，现在可以再登录接口返回token了。

注意看获取的token的key是小写的，前端会默认转换成小写，所以取值时候使用小写。
有登录就有退出，做一个退出按钮在右上角飘着~

	<div style="position:relative">      
		<el-button style="position: fixed;right: 0%;"  type="danger" size="small"   @click="quit()">退出登录</el-button>
	</div>

调用函数quit，函数里面删除token和用户信息然后调转到登录页面，注意remove参数里面域生产以后要换成生产主机域名。

quit() {    this.$cookies.remove("login-token",{domain:'localhost',path:'/'});    this.$cookies.remove("username",{domain:'localhost',path:'/'});				    this.$router.push("/")			},

我们还应该在页面加一下登录校验，如果没有登录tokencookie值就直接跳转到登录页面。

		mounted() { //这个属性就可以，在里面声明初始化时要调用的方法即可
			// we can implement any method here like
			this.geturl(),		                        this.login_check()
		}

校验方法

login_check() {				var v_token = this.$cookies.get("login-token");				console.log(v_token);				if (v_token== null){					this.$router.push("/")
				}else{					console.log('登录了')
				}
			},

然后再登录页面页判断下是不是已经登录过了，如果已经登录过了直接跳转到首页。

  mounted() { //这个属性就可以，在里面声明初始化时要调用的方法即可
      // we can implement any method here like
    this.logined_check()

logined_check() {
  var v_token = this.$cookies.get("login-token");
  if (v_token!= null){
    this.$router.push("/home")
  }else{
    console.log('已经登录了')}
  },

登录请求已经校验就基本完事了，下一节完善首页那个搜索功能。

周末拍的小姐姐，小姐姐真好看~