2025-03-17 User Detail

Concept

• check if login by get access_token from local_storage.
• querry userId from backend if login and set it in local_storage.
• use userId to querry user_detail.
• Must set Uset-detal component as parent of menu-output.

Why user-detail have to set as parent of menu-output

• Menu-output it always mount on web page every single page will see menu-output that make user-detail component always mount too.
• If user-detail not mount userdetail can't be query and if userdetail not query component will not know web page already login or not.
• After login menu-output will check login and decide which component should output between login component and not login component by check user detail had already query user-detail or not.

query userId

backend

• Phee is the one who create api for get user-detail ask Phee if have problem with get userId.
• for query backen that have authentication require send header with query.
• Example

  const objBackend = {
    method: "GET",
    url: "https://xpxz4ia541.execute-api.us-east-2.amazonaws.com/Test/baseUserId/get",//if phee re-deploy service api will change ask Phee if can't connect to api.
    headers: { //require for query api backen with auth.
      Authorization: "Bearer " + localStorage.getItem("access_token"),
      Accept: "application/json",
      "Content-Type": "application/json",
    },
    body: {},
  };
  const { data: userIdData } = useGetUserIdQuery(objBackend, {
    skip://not query backend if condition true, It good way to set condition for query.
      !localStorage.getItem("access_token") || 
      (localStorage.getItem("access_token") && localStorage.getItem("userId")),
  });

• backend have to give cors policy to allow frontend can get backend if see erro about cors policy ask Phee set this.

"headers": {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
    "Access-Control-Allow-Headers": "Content-Type, Authorization"
  },