我们采用的token令牌的方式验证用户,最近搞了个验证码接口,前端使用的vue接收,遇到如下问题:thinkphp5框架默认生成的验证码是session方式给到前端用户,但是vue端没有接收session的方式,这个问题不知道是不是前端不会接收session,会接收的就不存在这个问题.我们将验证码生成改为方法cache缓存方式,thinkphp5自带的composer下载验证码captcha类,在生成验证的地方添加缓存,缓存加密保证安全,验证依旧使用接口的方式,大致方法就是这样,有好方法的朋友帮忙分享下.指导下我.

前端vue代码这把

<template>
  <div>
    <img src="http://域名/v1/verify" />
    <!-- <img src="verify"> -->
    <input type="text" v-model='code'>
    <span @click='vyverify'>验证</span>
  </div>
</template>

<script>
    import store from "../store";
    export default {
        name: "test_verify",
        data() {
            return {
                code: ''
            };
        },
        created() {
            // store.dispatch("verify");
            // this.new_verify;
        },
        computed: {
            verify() {
                return store.state.verify;
            },
            new_verify() {
                alert(this.verify.split('"'));
                // let new_verify = this.verify.split(' ')[1];
                // return new_verify;
            },
        },
        methods: {
            formData() {
                let formData = new formData();
                formData.append('code', this.code);
                return formData;
            },
            vyverify() {
                store.dispatch('vyverify', this.$qs.stringify({
                    code: this.code,
                    token: localStorage.getItem('tokens')
                }));
                // store.dispatch('Vyverify', this.formData)
            }
        }
    };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

单独给个方法指向到前端页面,后端的生成验证码的方法

public function getcode()
 {
        ob_clean();
        $config = config('captcha');
        $captcha = new Captcha($config);
        return $captcha->entry();
    }

验证端接口处理,你也可以放上面生成验证码方法控制器一起,按自己需求来,代码如下

   public function vyverify(Request $request)
    {
        $param = $request->param();
        $code = strtolower($param['code']);
        if (empty($code)) {
            $this->error('验证码不能为空');
        }
        $verifycode = Cache::pull('verifycode');
        if(md5("$code") == base64_decode($verifycode)){
            throw new SuccessMessage(['msg' => '验证码验证成功!']);
        }else{
            throw  new ErrorException(['errorCode' => '10003', 'msg' => '验证码验证失败']);
        }
    }