axios 如何在非功能性组件中使用钩子

evrscar2  于 12个月前  发布在  iOS
关注(0)|答案(1)|浏览(151)
import { AES, enc, mode, pad } from "react-native-crypto-js";
import Constants from "expo-constants";
import axios from "axios";
import * as Device from 'expo-device';
import * as Notifications from 'expo-notifications';
import { Platform } from "react-native";
import { useDispatch } from "react-redux";
import { setJwtToken } from "../actions/jwtTokenActions";
let secretKey = Constants.manifest.configurations.secretKey;
let baseUrl = Constants.manifest.configurations.baseUrl + "/api/Login";



const DEFAULT_HEADERS = {
  "Content-Type": "application/json-patch+json",
  Accept: "application/json",
  "Access-Control-Allow-Origin": "*",
};

function getCurrentUtcDate() {
  const currentDate = new Date();
  const currentDateUtc = Date.UTC(
    currentDate.getUTCFullYear(),
    currentDate.getUTCMonth(),
    currentDate.getUTCDate(),
    currentDate.getUTCHours(),
    currentDate.getUTCMinutes(),
    currentDate.getUTCSeconds()
  );

  return new Date(currentDateUtc);
}

/**
 * 
 * @param {GetLoginChiperTextParams} params 
 * @returns 
 */
export function GetLoginChiperText(params) {

  params.time = getCurrentUtcDate().getTime();

  var key = enc.Utf8.parse(secretKey);
  var iv = enc.Utf8.parse(secretKey);

  var chiperText = AES.encrypt(enc.Utf8.parse(JSON.stringify(body)), key, {
    keySize: 128 / 8,
    iv: iv,
    mode: mode.CBC,
    padding: pad.Pkcs7,
  }).toString();
  return chiperText;
}

export async function LoginRequest(chiperText) {
  const dispatch = useDispatch();
  try {
    let loginRequest = await fetch(baseUrl + "/Login", {
      method: "post",
      body: JSON.stringify({ chiperText }),
      headers: {
        "Content-Type": "application/json-patch+json",
        Accept: "application/json",
      },
    });

    let jwtToken = await loginRequest.json();
    dispatch(setJwtToken(jwtToken));
    return jwtToken;
  } catch (error) {
    console.error(error);
    return null;
  }
}

export async function CheckJwtToken(jwtToken) {
  try {
    const url = `${baseUrl}/CheckJwtToken`;
    let headers = { ...DEFAULT_HEADERS };
    headers.Authorization = `Bearer ${jwtToken}`;

    const { data } = await axios.get(url, {
      headers,
      withCredentials: true,
    });
    return true;
  } catch (error) {
    console.log(error)
    return false;
  }
}

//#region TYPE_DEFINITIONS

/**
* @typedef {Object} GetLoginChiperTextParams
* @property {string} username
* @property {string} password
* @property {string} pushNotificationToken
* @property {int} tokenUserId
* @property {int} tokenCustomerId
* @property {Date} time
**/

//#endregion

字符串
我希望你专注于登录请求功能。
正如你所看到的,我试图在函数上分派jwtToken,但你可能也知道React不允许我这么做。因为钩子只能在函数组件中调用。但我们在应用程序中的许多地方都使用这个函数来接收来自后端的数据。
正如你所看到的,我们的生活依赖于这个函数,因为它是一个沉重的数据应用程序,我们总是像这样从API中获取数据。
我在这里尝试做的是有一个想法,我如何能找到最好的可能,在这个组件上的适当的变化,能够使用钩子。
有些人说axios拦截器可以完成这项工作,但实际上,我找不到路。如果你启发我,我会非常感谢你。
我怎么能让它发生,如何能在这里使用和调度jwtToken.我是一个大三,所以我试图抓住一个想法在这里.如果我犯了一个错误,只是告诉我,我会尝试修复它.
希望我说清楚了。如果你能给我一些启发,我将不胜感激。

mwngjboj

mwngjboj1#

考虑将其作为自定义钩子编写:

export function useLoginRequest() {
  return async function() {
    const dispatch = useDispatch();
    try {
      ...

字符串
然后在功能组件中:

const loginRequest = useLoginRequest();

...

await loginRequest(...)

相关问题