阅读 625

设置token到请求头

「本文已参与好文召集令活动,点击查看:后端、大前端双赛道投稿,2万元奖池等你挑战!

记录知识点、每天进步一点一点点~
复制代码
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;
              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);
});
复制代码

image.png

这样token就已经放到header上了,代表设置成功

主要用途:

当输入用户名及密码,登录成功后,后台会返回一个token,在之后发送的请求都要带上这个token,因为后台设置了拦截,如果token一致,则允许访问,否则请求不成功。所以需要将token放到请求头,我这里是在vue中使用的,其他地方使用也一样同理。

文章分类
前端
文章标签