Nextjs的这种保护路由解决方案是否可用？答案

【问题标题】：Is this protecting route solution for Nextjs usable?Nextjs的这种保护路由解决方案是否可用？
【发布时间】：2020-10-27 21:45:46
【问题描述】：

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 解码的用户对象。

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

【问题讨论】：

这个帖子可能有用：github.com/vercel/next.js/discussions/13610

标签： reactjs authentication next.js

【解决方案1】：

我建议使用 react context ：

例如：

 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

还有 UserProvider ：

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 作为父组件，因此每个路由都可以访问用户信息或登录信息。

【讨论】：