Cách quản lý dữ liệu phiên của người dùng trong React bằng cookie và lưu trữ phiên

Quản lý dữ liệu phiên xác thực người dùng bằng cookie

Để trình bày cách sử dụng cookie để lưu trữ thông tin xác thực của người dùng, hãy tiếp tục và tạo một thành phần/Đăng nhập.jsx tập tin trong src danh mục. Bên trong tệp này, thêm đoạn mã sau.

1. Thực hiện nhập khẩu sau đây.

    import { useState } from 'react';
   import { useNavigate } from 'react-router-dom';
   import Cookies from 'js-cookie'; 

2. Tạo một thành phần chức năng và thêm các phần tử JSX cho biểu mẫu đăng nhập.

    const Login = () => {
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     return (
       <form onSubmit={handleLogin}>
         <input
           type="text"
           placeholder="Username"
           value={username}
           onChange={(e) => setUsername(e.target.value)}
         />
         <input
           type="password"
           placeholder="Password"
           value={password}
           onChange={(e) => setPassword(e.target.value)}
         />
         <button type="submit">Login</button>
       </form>
     );
   };
   export default Login; 

Vì chúng tôi không có API phụ trợ để xác thực thông tin đăng nhập của người dùng, nên chúng tôi sẽ tạo một chức năng xác minh dữ liệu do người dùng nhập trong biểu mẫu đăng nhập bằng thông tin xác thực của người dùng thử nghiệm. Bên trong thành phần chức năng, thêm đoạn mã sau.

   const testAuthData = {
    username: 'test',
    password: 'test',
  }; 
  const authenticateUser = (username, password) => {
    if (username === testAuthData.username && password === testAuthData.password) { 
      const userData = {
        username,
        password,
      };
      const expirationTime = new Date(new Date().getTime() + 60000);
      Cookies.set('auth', JSON.stringify(userData), { expires: expirationTime });
      return true;
    }
    return false;
  };
  const handleLogin = (e) => {
    e.preventDefault();
    const isAuthenticated = authenticateUser(username, password);
    if (isAuthenticated) {
      navigate('/protected');
    } else {
      
    }
  }; 

Bên trong xác thực người dùng chức năng này, nó sẽ kiểm tra xem tên người dùng và mật khẩu được cung cấp có khớp với dữ liệu xác thực thử nghiệm hay không. Nếu thông tin xác thực phù hợp, nó sẽ tạo ra một dữ liệu người dùng đối tượng với tên người dùng và mật khẩu. Sau đó, nó đặt thời gian hết hạn cho cookie và lưu trữ dữ liệu người dùng trong một cookie có tên xác thực sử dụng Cookies.set phương pháp.

Sau khi xác thực thành công, người dùng chuyển hướng đến một trang được bảo vệ vì họ được phép truy cập các tài nguyên được bảo vệ. Bằng cách lưu trữ thông tin xác thực trong cookie, bạn thiết lập một phiên người dùng đang hoạt động, cho phép các yêu cầu tiếp theo tự động bao gồm các chi tiết xác thực.

Dữ liệu phiên người dùng này cho phép mã máy chủ xác minh danh tính của người dùng và cho phép truy cập vào các đặc quyền mà không yêu cầu người dùng xác thực lại cho từng yêu cầu.

Cập nhật tệp App.jsx

Thực hiện các thay đổi đối với Ứng dụng.jsx tệp để xử lý định tuyến người dùng sau khi xác thực thành công

 import { BrowserRouter, Route, Routes, useNavigate } from 'react-router-dom';
import Cookies from 'js-cookie';
import Login from './components/Login';
const ProtectedPage = ({ ...rest }) => {
  const isAuthenticated = !!Cookies.get('auth');
  const navigate = useNavigate();
  const handleLogout = () => { 
    Cookies.remove('auth');
    navigate('/login'); 
  };
  if (!isAuthenticated) {
    navigate('/login'); 
    return null; 
  }
  return (
    <div>
      <h1 style={{ fontSize: '24px', color: 'blue' }}>Hello, World!</h1>
      <button style={{ marginTop: '10px' }} onClick={handleLogout}>
        Logout
      </button>
    </div>
  );
};
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/protected/*" element={<ProtectedPage />} />
        <Route path="/login" element={<Login />} />
      </Routes>
    </BrowserRouter>
  );
};
export default App; 

Đoạn mã trên thiết lập các thành phần cần thiết và logic định tuyến. Nó bao gồm một nút đăng xuất, khi được nhấn, sẽ xóa cookie xác thực và chuyển hướng người dùng đến trang đăng nhập.

Ngoài ra, nó xác minh sự hiện diện của cookie xác thực và chuyển hướng người dùng đến trang đăng nhập nếu không có. Tuy nhiên, nếu có cookie, Trang được bảo vệ thành phần hiển thị một trang dành riêng cho người dùng được xác thực.

Cuối cùng, hãy chạy lệnh bên dưới để khởi động máy chủ phát triển để kiểm tra ứng dụng.

 npm run dev 

Trên trình duyệt của bạn, điều hướng đến http://127.0.0.1:5173/đăng nhập, và nhập thông tin xác thực kiểm tra. Sau khi đăng nhập thành công, một cookie mới được tạo có chứa dữ liệu phiên, bao gồm thông tin xác thực thử nghiệm.

Khi cookie hết hạn hoặc khi bạn nhấp vào nút đăng xuất, cookie sẽ bị xóa. Hành động này kết thúc hiệu quả phiên người dùng đang hoạt động và đăng xuất bạn.

Lưu trữ dữ liệu xác thực người dùng bằng lưu trữ phiên

Cả lưu trữ phiên và cookie đều hoạt động tương tự nhau. Để lưu trữ thông tin cần thiết trong bộ lưu trữ phiên của trình duyệt, bạn có thể sử dụng sessionStorage.setItem phương pháp.

  sessionStorage.setItem('auth', JSON.stringify(userData)); 

Bằng cách thêm câu lệnh trên vào bên trong xác thực người dùng chức năng trong Đăng nhập thành phần, bạn có thể lưu trữ dữ liệu xác thực của người dùng trong bộ lưu trữ phiên của trình duyệt.

Khám phá các trường hợp sử dụng bổ sung cho cookie và lưu trữ phiên

Hướng dẫn này nêu bật cách sử dụng cookie và lưu trữ phiên để lưu trữ thông tin đăng nhập xác thực của người dùng. Tuy nhiên, cookie và lưu trữ phiên cung cấp nhiều khả năng hơn ngoài việc lưu trữ thông tin xác thực.

Bằng cách tận dụng các tính năng này, bạn có thể quản lý dữ liệu phiên bổ sung, dẫn đến trải nghiệm người dùng được cá nhân hóa và an toàn hơn.