vue在响应头response中获取自定义headers操作
日常开发,我们可能会为了安全问题,保证第三方无法通过伪造返回报文欺骗前端,需要在返回报文中添加自定义参数,用于验证身份,后端添加自定义参数,前端校验自定义参数通过后才会执行相应的操作。
系统为了安全会去掉自定义头,如果不做任何处理,前端无法通过javascript访问自定义头,所以需要在接口返回中添加这样的操作。
response['Cookie'] ='13231231231' #自定义头
添加后接口返回信息如以下截图:
要正确打印需要在接口返回中设置以下信息:
response['Access-Control-Expose-Headers'] = "Cookie" #Cookie为自定义头的key
设置完后,打印截图如下:
接着我们在postman里面试一试,有了这个token值后台会返回什么数据。由于一通百通这里我们就只看登录页面。看下图,返回给我们的是用户的一些基本信息。
也就是说我们在登录页面获取token,在“我的”页面通过token请求用户名放到对应位置。
3、利用localStorage存取token实例
登录按钮的js:
handleLogin() { this.$axios({ method: 'post', url: '/api/v1/login', headers: { 'Content-Type': "application/json;charset=UTF-8", }, data: { name: this.loginForm.username, password: this.loginForm.password } }) .then(res=>{ //请求成功后执行函数 if(res.data.code === 0){ //利用localstorage存储到本地 localStorage.setItem("token",res.data.data.token) this.$router.push('/me') //登录验证成功路由实现跳转 console.log("登录成功") }else{ console.log("登录失败") } }) .catch(err=>{ //请求错误后执行函 console.log("请求错误") }) },
在这个登录页面我们主要是通过localstorage来把token值存到本地。
核心代码:
localStorage.setItem("token",res.data.data.token)
//表示把res.data.data.token这个value存储到本地的“token”这个key里面
这里的res.data.data.token,一定要注意是否有两个data。从下图可以看到,res.data是指返回的所有数据,因此再有一个data表示data里边的数据,token就在里边了。
- me.vue页面取出token值并请求用户名js代码:
export default { data: function () { return { name:'', token:'' } }, created(){ //页面加载时就从本地通过localstorage获取存储的token值 this.token = localStorage.getItem('token') }, mounted() { this.$axios({ method: 'get', url: '/api/v1/user', headers: { 'Content-Type': "application/json;charset=UTF-8", //把token放到请求头才能请求,这里的'Bearer '表示是后台希望更加的安全,依据后台给的信息看到底是加还是不加 'Authorization': 'Bearer ' + this.token, } }) .then(res=>{ //请求成功后执行函数 if(res.data.code === 0){ //请求成功之后给用户名赋值 this.name=res.data.data.username console.log("登录成功") }else{ console.log("登录失败") } }) .catch(err=>{ //请求错误后执行函 console.log("请求错误") }) }, }
这边同理,直接用localstorage取出就好了。
核心代码:
created(){ //页面加载时就从本地通过localstorage获取存储的token值 this.token = localStorage.getItem('token') },
之后在其他的页面如果还需要把token放到请求头,还是直接通过localstorage的getitem就可以取出了,即localStorage.getItem('token')。
以上这篇vue在响应头response中获取自定义headers操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持来客网。