Mengapa ketika saya memuat aplikasi dan/atau memuat ulang halaman kemudian mencoba masuk ke aplikasi, token JWT tidak tersedia untuk saya pada percobaan pertama:

enter image description here

Tetapi jika saya keluar dan masuk kembali, saya melihat bahwa sekarang token tersedia untuk saya:

enter image description here

Saya telah memeriksa ulang kode saya dan sepertinya tidak dapat menemukan apa yang menyebabkan masalah ini

api_helper.js

import axios from "axios"
import accessToken from "./jwt-token-access/accessToken"

const token = accessToken();
const API_URL = "http://localhost:8080";

const axiosApi = axios.create({
  baseURL: API_URL,
  headers: {
    'Content-Type': 'application/json',
    // 'Authorization': 'Bearer ' + token,
  },
})

axiosApi.defaults.headers.common["Authorization"] = token ? `Bearer ${token}` : '';

axiosApi.interceptors.response.use(
  response => response,
  error => Promise.reject(error)
)

export async function get(url, config = {}) {
  return await axiosApi
    .get(url, { ...config })
    .then(response => response.data)
}

export async function post(url, data, config = {}) {
  return axiosApi
    .post(url, { ...data }, { ...config })
    .then(response => response.data)
}

export async function put(url, data, config = {}) {
  return axiosApi
    .put(url, { ...data }, { ...config })
    .then(response => response.data)
}

export async function del(url, config = {}) {
  return await axiosApi
    .delete(url, { ...config })
    .then(response => response.data)
}

auth_helper.js

import { post, get, put } from "./api_helper";
const getLoggedInUser = () => {
    const user = localStorage.getItem('authUser');
    if (user) return JSON.parse(user);
    return null;
}

//is user is logged in
const isUserAuthenticated = () => {
    return getLoggedInUser() !== null;
}

export { 
    getLoggedInUser, 
    isUserAuthenticated
}

accessToken.js

const accessToken = () => {
  const obj = JSON.parse(localStorage.getItem("authUser"));
  
  if (obj && obj.token) {
    return obj.token;
  } else {
    return "";
  }
};

export default accessToken;
0
Shaun 12 Mei 2021, 05:12

1 menjawab

Jawaban Terbaik

Ini adalah jawaban untuk pertanyaan yang Anda ajukan sebelumnya hari ini dan kemudian dihapus, jika masih berguna. (Pertanyaan itu berjudul "Bagaimana cara mengulang dan menampilkan array objek menjadi dua div berbeda yang berisi seperti panel berdampingan?")

Cuplikan memiliki fungsi extractDisplayTexts dan fungsi addChildrenToRightDiv untuk mengisi div, dan memanfaatkan tata letak flexbox untuk menatanya seperti yang Anda sarankan.

Selamat mengkode.

const
  // Gets data, extracts strings, and identifies DOM container
  json = getInput(),
  texts = extractDisplayTexts(json),
  outer = document.getElementById("container");
  
// Creates left div (and puts first string in it)
const left = document.createElement("div");
left.textContent = texts[0];

// Creates right div (giving it `flex-direction: column`)
const right = document.createElement("div");
right.classList.add("column");
right.classList.add("separator-at-left");

// Makes column's children (and puts remaining strings in it)
addChildrenToRightDiv();

// Adds both divs to the DOM
container.appendChild(left);
container.appendChild(right);

function addChildrenToRightDiv(){
  const otherTexts = texts.slice(1);
  for(let text of otherTexts){
    const newDiv = document.createElement("div");
    newDiv.textContent = text;
    right.appendChild(newDiv);
  }
}

function extractDisplayTexts(data){
  strings = [];
  for(let path of data.tableData.datapaths){
    const
      [header, label] = path.row,
      headerText = header.header,
      num = header.value,
      labelText = label.label,
      date = label.value,
      displayText =`${headerText}${num}, ${labelText} ${date}`;
    strings.push(displayText);
  }
  return strings;
}

function getInput(){
  return {
    "tableData": {
      "datapaths": [
        {
          "row": [
            { "header": "Initial Seq #: ", "value": "5" },
            { "label": "Issued", "value": "Dec 1, 2015" }
          ]
        },
        {
          "row": [
            { "header": "Initial Seq #: ", "value": "3" },
            { "label": "Issued", "value": "Sept 25, 2014" }
          ]
        },
        {
          "row": [
            { "header": "Initial Seq #: ", "value": "5" },
            { "label": "Issued", "value": "Feb 10, 2013" }
          ]
        }
      ]
    }
  };
}
div { padding: 5px; }
.separator-at-left{ border-left: 3px solid blue; }
.row { display: flex; flex-direction: row; }
.column { display: flex; flex-direction: column; } /* vertical layout */
<div id="container" class="row"></div>
1
Cat 12 Mei 2021, 12:08