本地存储仅显示用户的一项数据

问题描述 投票:0回答:1

我正在尝试显示一些用户信息,例如其真实姓名、有关其自身及其用户名的一些文本,但当我尝试显示真实姓名和用户名时,仅显示用户名。

req.session.user 和 name 工作得很好,它们返回用户名和用户真实姓名,但是当我使用 const user = localStorage.getItem("name"); 时我无法获取用户真实姓名

编辑配置文件.jsx

import axios from 'axios';
import { useNavigate } from '@solidjs/router';

function RegisterComponent() {
  const navigate = useNavigate();
  const [username, setUsername] = createSignal('');
  const [userId, setUserId] = createSignal('');
  const [isLoggedIn, setIsLoggedIn] = createSignal(false);


  onMount(async () => {
    try {
      const user = localStorage.getItem("name");
      if (user) {
        console.log(user)
        setUserId(user);
        setIsLoggedIn(true);
      } else {
        setUserId('');
        setIsLoggedIn(false);
      }
      const username = localStorage.getItem("user");
      if (username) {
        setUsername(username);
        setIsLoggedIn(true);
      } else {
        setUsername('');
      }
    } catch (error) {
      console.log(error);
    }
  });


  return (
    <section class="bg-white dark:bg-gray-900">
    <div class="grid max-w-screen-xl px-4 py-8 mx-auto lg:gap-8 xl:gap-0 lg:py-16 lg:grid-cols-12">
        <div class="mr-auto place-self-center lg:col-span-7">
        <section class="bg-white dark:bg-gray-900">
  <div class="max-w-2xl px-4 py-8 mx-auto lg:py-16">
      <h2 class="mb-4 text-xl font-bold text-gray-900 dark:text-white">Update product</h2>
      <form action="#">
          <div class="grid gap-4 mb-4 sm:grid-cols-2 sm:gap-6 sm:mb-5">
              <div class="sm:col-span-2">
                  <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Product Name</label>
                  <input type="text" name="name" id="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value="Apple iMac 27&ldquo;" placeholder="Type product name" required=""/>
              </div>
              <div class="w-full">
                  <label for="brand" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Brand</label>
                  <input type="text" name="brand" id="brand" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value="Apple" placeholder="Product brand" required=""/>
              </div>
              <div class="w-full">
                  <label for="price" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Price</label>
                  <input type="number" name="price" id="price" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value="2999" placeholder="$299" required=""/>
              </div>
              <div>
                  <label for="category" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Category</label>
                  <select id="category" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-500 focus:border-primary-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500">
                      <option selected="">Electronics</option>
                      <option value="TV">TV/Monitors</option>
                      <option value="PC">PC</option>
                      <option value="GA">Gaming/Console</option>
                      <option value="PH">Phones</option>
                  </select>
              </div>
              <div>
                  <label for="item-weight" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Item Weight (kg)</label>
                  <input type="number" name="item-weight" id="item-weight" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-primary-600 focus:border-primary-600 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" value="15" placeholder="Ex. 12" required=""/>
              </div> 
              <div class="sm:col-span-2">
                  <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
                  <textarea id="description" rows="8" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-primary-500 focus:border-primary-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-primary-500 dark:focus:border-primary-500" placeholder="Write a product description here...">Standard glass, 3.8GHz 8-core 10th-generation Intel Core i7 processor, Turbo Boost up to 5.0GHz, 16GB 2666MHz DDR4 memory, Radeon Pro 5500 XT with 8GB of GDDR6 memory, 256GB SSD storage, Gigabit Ethernet, Magic Mouse 2, Magic Keyboard - US</textarea>
              </div>
          </div>
          <div class="flex items-center space-x-4">
              <button type="submit" class="text-white bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
                  Update product
              </button>
              <button type="button" class="text-red-600 inline-flex items-center hover:text-white border border-red-600 hover:bg-red-600 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:border-red-500 dark:text-red-500 dark:hover:text-white dark:hover:bg-red-600 dark:focus:ring-red-900">
                  <svg class="w-5 h-5 mr-1 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
                  Delete
              </button>
          </div>
      </form>
  </div>
</section>
        </div>
        <div class="hidden lg:mt-0 lg:col-span-5 lg:flex">
        <section class="bg-white dark:bg-gray-900">
  <div class="py-8 px-4 mx-auto max-w-2xl lg:py-16">
      <h2 class="mb-2 text-xl font-semibold leading-none text-gray-900 md:text-2xl dark:text-white">Suas informações</h2>
      <dl>
          <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Sobre você</dt>
          <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">Standard glass ,3.8GHz 8-core 10th-generation Intel Core i7 processor, Turbo Boost up to 5.0GHz, 16GB 2666MHz DDR4 memory, Radeon Pro 5500 XT with 8GB of GDDR6 memory, 256GB SSD storage, Gigabit Ethernet, Magic Mouse 2, Magic Keyboard - US.</dd>
      </dl>
      <dl class="flex items-center space-x-6">
          <div>
              <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Seu nome de usuário</dt>
              <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400"> 
              {isLoggedIn() ? (
                <>
                <div class="flex items-center">
                  <h1 class="mr-2">{userId()}  </h1>
                </div>
                </>
              ) : (
                <h1> Registrar-se</h1>
              )}</dd>
          </div>
          <div>
              <dt class="mb-2 font-semibold leading-none text-gray-900 dark:text-white">Seu Nome</dt>
              <dd class="mb-4 font-light text-gray-500 sm:mb-5 dark:text-gray-400">
              {isLoggedIn() ? (
                <>
                <div class="flex items-center">
                  <h1 class="mr-2">{username()}  </h1>
                </div>
                </>
              ) : (
                <h1> Registrar-se</h1>
              )}
              </dd>
          </div>
      </dl>
      <div class="flex items-center space-x-4">
          <button type="button" class="text-white inline-flex items-center bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
              <svg aria-hidden="true" class="mr-1 -ml-1 w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z"></path><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd"></path></svg>
              Edit
          </button>   
          <button type="button" class="inline-flex items-center text-white bg-red-600 hover:bg-red-700 focus:ring-4 focus:outline-none focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-red-500 dark:hover:bg-red-600 dark:focus:ring-red-900">
              <svg aria-hidden="true" class="w-5 h-5 mr-1.5 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"></path></svg>
              Delete
          </button> 
      </div>
  </div>
</section>
        </div>                
    </div>
</section>
  );
}

export default RegisterComponent;

userController.js

exports.userLogin = async (req, res) => {
    const { username, email, password } = req.body


    if(!username){
        return res.status(422).json({ msg: "O Username é obrigatório!"})
    }

    if(!email){
        return res.status(422).json({ msg: "O email é obrigatório!"})
    }
    if(!password){
        return res.status(422).json({ msg: "A senha é obrigatória!"})
    }

    const user = await prisma.user.findUnique({
        where: {
            email
        }
    })
    
    
    
    if(!user) {
        return res.status(404).json({ msg: "Usuario não encontrado!"})
    }
    
    const checkPassword = await bcrypt.compare(password, user.password)

    if(!checkPassword){
        return res.status(422).json({ msg: "Senhas inválida!"})
    }

    req.session.user = user.username;
    req.session.name = user.name

    console.log(req.session.user)
    console.log(req.session.name)
    
        try {
        req.session.loggedin = true  
        res.status(200).json({ msg: "Autenticação realizada com sucesso", user:req.session.user, name:req.session.name})
    } catch (error) {
        res.status(400).json({ msg: error.message })
    }
}
javascript node.js local-storage prisma solid-js
1个回答
0
投票

我假设您的

if
返回 false,因为保存的项目是一个空字符串
""
,即
falsy
。您必须检查
undefined
。例如:

const user = localStorage.getItem("name");
  if (user !== undefined) {
    ...
© www.soinside.com 2019 - 2024. All rights reserved.