网关，图形验证码登录功能实现

一杯清酒.

已于 2022-07-29 10:09:53 修改

阅读量410

点赞数

分类专栏： axios Vue2 前端项目总结文章标签： vue.js javascript elementui

于 2022-07-11 14:19:34 首次发布

本文链接：https://blog.csdn.net/qq_45827004/article/details/125719751

版权

Vue2 同时被 3 个专栏收录

32 篇文章 0 订阅

订阅专栏

前端项目总结

18 篇文章 0 订阅

订阅专栏

axios

6 篇文章 0 订阅

订阅专栏

1.收集表单信息

 loginForm:
      {
        loginName: 'wangwu',
        password: '12345678',
        validateCode:'',
        code:''
      },

2.封装接口，设置headers

//获取图形验证码
export function getImg(params) {
    return service6.request({
        method: 'get',
        url: 'validatecode/image/',
        params
    })
}

//登录
export function login(data) {
    return service6.request({
        method: 'post',
        url: 'urm/login',
        data: data,
        headers: {
            "ValidateCode": JSON.stringify({
                "type": 1,
                "imageValidateCode": {
                    "code": data.code,
                    "validateCode": data.validateCode
                }
            })
        }
    })
}

3.调用接口

async getImgVal(){
      const {data:res} = await getImg({})
      this.imgUrl = res.validateCodeImage
      this.loginForm.code=res.code
      }

async login () {
        const res1 = await login(this.loginForm)
        if(res1.code === 0){
          //登录成功后给用户添加token
            // window.sessionStorage.setItem('token', res.data.token)
            this.$message.success('登录成功！')
            this.$router.push('/index')
          }else{
            return this.$message.error(res.message)
        }
    }