vue怎么输出php验证码,thinkphp5+vue 接口api驗證碼方式

我們采用的token令牌的方式驗證用戶,最近搞了個驗證碼接口,前端使用的vue接收,遇到如下問題:thinkphp5框架默認生成的驗證碼是session方式給到前端用戶,但是vue端沒有接收session的方式,這個問題不知道是不是前端不會接收session,會接收的就不存在這個問題.我們將驗證碼生成改為方法cache緩存方式,thinkphp5自帶的composer下載驗證碼captcha類,在生成驗證的地方添加緩存,緩存加密保證安全,驗證依舊使用接口的方式,大致方法就是這樣,有好方法的朋友幫忙分享下.指導下我.

前端vue代碼這把

   

驗證

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)

}

}

};

單獨給個方法指向到前端頁面,后端的生成驗證碼的方法

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' => '驗證碼驗證失敗']);

}

}