自定义hook函数
本质上hook是一个函数,把setup函数中使用的Composition API进行了封装。
类似于Vue2中的mixin
其使用目的是为了复用代码,让setup中的逻辑更加清楚易懂
SighIn.ts
/* eslint-disable no-unused-vars */
import { ref, Ref } from 'vue';
import { getPublicKeyAPI, loginAPI, LoginParam } from '@/api/userManage';
import { JSEncrypt } from 'jsencrypt';
export type Callback = () => void
export interface SignInState {
publicKey: Ref<string>,
token: Ref<string>,
getPublicKey: (success?: Callback, fail?: Callback) => void,
login: (param: LoginParam, success?: Callback, fail?: Callback) => void
}
class SignIn {
publicKey = ref('')
token = ref('')
/**
* 获取公钥
* @param success 成功回调
* @param fail 失败回调
*/
getPublicKey(success?: Callback, fail?: Callback): void {
getPublicKeyAPI()
.then(({ data }: any) => {
this.publicKey.value = data;
success && success();
})
.catch(() => {
fail && fail();
});
}
/**
* 登录
* @param param
* @param success
* @param fail
*/
login(param: LoginParam, success?: Callback, fail?: Callback): void {
try {
const toLogin = (): void => {
// RSA 加密
const jsencrypt = new JSEncrypt();
jsencrypt.setPublicKey(this.publicKey.value);
const RSApassword = jsencrypt.encrypt(param.credential);
if (RSApassword) {
param.credential = RSApassword;
loginAPI(param).then(({ data }) => {
this.token = data.token;
localStorage.setItem('token', this.token.value);
success && success();
});
} else {
throw new Error();
}
};
this.getPublicKey(toLogin);
} catch (error) {
fail && fail();
}
}
}
export default () => new SignIn();