如何在 React 中使用 JSESSIONID（会话 cookie）进行身份验证？

Question

So, I'm fetching data from an API that is built in Liferay (json web service) and in which I'm to integrate into a React frontend. Right now I'm at the stage where I need to authenticate a user, and I'm halfway there. I'm currently sending a post-request with the Fetch API, to a specific endpoint that is defined in the backend. From there I get back some user data in JSON format, but also a JSESSIONID cookie. I'm mostly used to using json web tokens for authentication and basically what I need to know how to use this session cookie in a similar way.

I'm thinking in my mind I want to store the cookie in a state/context, and let the application determine if there is a session, and only then be able to access protected routes, etc, but I'm not entirely sure this is the way you do it.

I would really be glad if someone could point me in the right direction.

Answer 1

The context to verify that the user is authenticated.

    import * as React from 'react'
        
        export const AuthContext = React.createContext({})
        
        const AuthProvider = ({
            children
        }) => {
            const [dataUser, setDataUser] = React.useState({})
        
            const Data = async () => {
                const user = await fetch('url')
                const resp = await user.json()
        
                setDataUser(resp) 
//cookies or localStorage

               localStorage.setItem('user', resp)
            }
        
            React.useEffect(() => {
               Data()
            }, [])
        
            const existUser = () => {
            return JSON.parse(localStorage.user).id === dataUser.id 
}
        const Auth = existUser()
           return(
                <AuthContext.Provider value={{dataUser, setDataUser, Auth}}>
                    {children}
                </AuthContext.Provider>
            )
        }
           
        export default AuthProvider

put the provider in the app

const App = () => {
 
    return(
       <AuthProvider>
         <Pages />
       </AuthProvider>
    )
}

export default App

build the pages that need authentication, using useContext, or a custom react hook.

const DashBoard = ({}) => {

    const { Auth } = React.useContext(AuthContext)

    const isAuth = () => {
        Auth ?? window.location('url') // or react router history
    }

    React.useEffect(() => {
        isAuth()
    }, [])

    return(
        <>
          {Auth && //optional
            <div>
               <h1>DashBoard</h1>
            </div>
          }
        </>
    )
}