React实现登录授权功能

一、概述

        本文将通过React实现项目登录授权功能。

二、技术实现

useAuth.js

import {useEffect, useState} from "react";

const LOCALSTORAGE_USER = "LOCALSTORAGE_USER";
export const useAuth = () => {

  /**
   * 认证用户状态
   */
  const [user, setUser] = useState(null);

  /**
   * 登录函数
   */
  const login = async (username, password) => {
    const res = await authService.auth(username, password);
    setUser(res.data);
    window.localStorage.setItem(LOCALSTORAGE_USER, JSON.stringify(res.data))
  }

  /**
   * 登出函数
   */
  const logout = (username) => {
    setUser(null)
    window.localStorage.removeItem(LOCALSTORAGE_USER)
  }

  /**
   * 初始化加载
   */
  useEffect(
    () => {
      setUser(JSON.parse(window.localStorage.getItem(LOCALSTORAGE_USER)));
    }
    , []
  );
  
  return {user, login, logout}
}

app.js

import React from 'react';
import useAuth from './useAuth';

function App() {
  const { user, login, logout } = useAuth();

  return (
    <div>
      {user ? (
        <div>
          <p>Welcome, {user.name}!</p>
          <button onClick={logout}>Logout</button>
        </div>
      ) : (
        <div>
          <p>Please login</p>
          <button onClick={login}>Login</button>
        </div>
      )}
    </div>
  );
}

export default App;