Nextjs的保护路由解决方案可用吗

Question

import { useEffect, useState } from 'react';
import { useRouter } from 'next/router';
import Login from './index';
import auth from '../services/authService';
export default function App({ Component, pageProps }) {
  const [user, setUser] = useState(null);
  const router = useRouter();
  useEffect(() => {
    const user = auth.getCurrentUser();
    setUser(user);
    if (!user) return router.replace('/');
  }, []);
  return <Component {...pageProps} />;
}

此处-

• Login组件包含登录表单
• auth.getCurrentUser()返回jwt解码的用户对象

我不希望除登录页面外的任何页面被未经授权的用户访问。它会起作用吗？我正在为这个问题寻找一个好的解决方案。

Answer 1

我建议使用反应上下文：

例如：

 1-create usercontext
    export const UserContext = createContext(initialUser) 
 2- then create userprovider 
    UserProvider : 
     <UserContext.Provider value={initialUser}>{children}</UserContext.Provider>
 3- for example:
    initialUser ={
      user :{USER_DATA},
      isLogin : true | false //if cookie set or user exist ? true : false
    }
    you can fetch USER_DATA from api or internet

也是用户提供商：

const checkAuth = () =>{ ... }
const logout = () =>{ ... }
 
const storeUser = user => { ... }
return <UserContext.Provider value={initialUser}>{children}. 
       </UserContext.Provider>

在_app中

import { UserProvider, UserContext } from "PATH_TO_CONTEXT/UserConext";
const initialUser = useContext(UserContext)
<UserProvider >
 {initialUser.isLogin ? <Component {...pageProps} /> : <Login {...pageProps} />}
</UserProvider>

正如您所看到的，我使用UserProvider作为父组件，因此每个路由都可以访问用户信息或登录信息。