设置token到请求头
handleSubmit2(ev) {//回车登录 var _this = this; this.$refs.ruleForm2.validate((valid) => { if (valid) { this.logining = true; var loginParams = { account: this.ruleForm2.account, password: this.ruleForm2.checkPass }; requestLogin(loginParams).then(data => { this.logining = false; this.$message.success(data.msg); // this.$message.success('登录成功'); if (data.status !== 1) { this.$message({ message: msg, type: 'error' }); } else { this.$message.success('登录成功'); localStorage.setItem('user', JSON.stringify(data.data.token));//将token存储起来 this.$router.push({ path: '/user' }); } document.onkeydown = undefined; }); } else { console.log('error submit!!'); return false; } }); },
将token设置到header
axios.interceptors.request.use(function (config) { let token = window.localStorage.getItem("user") token = eval('(' + token + ')'); // console.log(token) if (token) { config.headers.token = token; //将token放到请求头发送给服务器 //这里经常搭配token使用,将token值配置到tokenkey中,将tokenkey放在请求头中 // config.headers['token'] = Token;
//config.headers.token的token是需要和后台定义叫什么的,我这里定义叫token了
} return config; }, function (error) { return Promise.reject(error); });
这样token就已经放到header上了,代表设置成功
主要用途:
当输入用户名及密码,登录成功后,后台会返回一个token,在之后发送的请求都要带上这个token,因为后台设置了拦截,如果token一致,则允许访问,否则请求不成功。所以需要将token放到请求头,我这里是在vue中使用的
博客仅属自己记录笔记,方便以后使用或者忘记(好记性不如烂笔头~)