thinkphp5+vue 接口api验证码方式

我们采用的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' => '验证码验证失败']);

        }

    }