项目登录页面，后端生成验证码，前端显示问题

需求，项目中的登录页面用到了验证码，后端生成啦图片数据，前端调取接口获取数据，显示在页面
template

     <el-form-item prop="code">
          <el-input
            ref="code"
            prefix-icon="el-icon-document-checked"
            clearable
            placeholder="验证码"
            v-model="loginForm.code"
            style="width: 70%"
            @keyup.enter.native="login"
          ></el-input>
          <div @click="changeCode()" style="float: right">
            <img :src="imgPath" title="点击刷新" alt="点击刷新" />
          </div>
        </el-form-item>

data

 data() {
    return {
      imgPath: '',
      }
    }

methods

 // 点击验证码刷新验证码
    changeCode() {
      this.$axios
        .get('/login/jpg', {
          responseType: 'arraybuffer',
        })
        .then((res) => {
          window.sessionStorage.setItem(
            'token',
            res.headers['content-disposition']
          )
          this.imgPath = `data: image/jpeg;base64,${btoa(
            new Uint8Array(res.data).reduce(
              (data, byte) => data + String.fromCharCode(byte),
              ''
            )
          )}`
        })
    },

说明：获取验证码成功后会返回一个token值，点击‘登录’按钮登录成功以后会重新获取一个token值，覆盖掉获取器验证码成功后获取的token值。