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