vue中携带token以及发送ajax
在项目中基本登录都会存在token,而我们也就需要在每次发送ajax的时候就必须携带他。从而最有效的办法,就是在设置请求头携带token,这样设置一次后面的每一次都会携带着这个token。
一:设置请求头
axios.interceptors.request.use(config => { let token = local.get('t_k') if (token) { config.headers.Authorization = token; } return config })
这里的local.get是我封装的本地存储的方法。然后if进行判断是否存在这个token。这里面的Authorization不是固定的,具体看后端命名。比如我这后端命名为mtoken也就相当于Authorization替换成mtoken !!!.替换后可以在浏览器中进行检查
一:
二:![](https://img2020.cnblogs.com/blog/2235722/202012/2235722-20201222093655344-1676792831.png)
三:![](https://img2020.cnblogs.com/blog/2235722/202012/2235722-20201222093719545-774175590.png)
四:![](https://img2020.cnblogs.com/blog/2235722/202012/2235722-20201222093810898-319254633.png)
当你书写正确的时候第四步的里面就会有一个属性是你设置的属性,属性值等于后端给你的token
现在我们把token携带好后就开始发ajax
我这的需求相当于,进入页面也要求得到数据,也就是在vue的生命周期的调用你的ajax函数,
async submitForm() { let res = await zjshouyi(this.loginForm); console.log(res); },
这里面的async和await是用来处理异步的。然后zjshouyi是我封装的ajax请求函数
created() { this.submitForm(); },
然后我是放在vue的创建后进行发送ajax,一点要注意一下!!! 这里的函数前面一定要带一个this不然会报错,报你的函数未定义