Next.js Компонент для проверки доступа к странице

Question

Доброго времени суток!

Пишу небольшое web приложение на Next.js. Потребовалось разграничить доступ на обычные страницы и страницы админа. Все страницы админа я обертываю <isAdmin> ... </isAdmin>

Код компонента:

const isAdmin = ({ children }) => {
    const check = auth_admin()
    console.log(check)
        if (check) {
           render() ( {children} )
        }
        else { return Router.push('/admin/login') }
}

export default isAdmin

Мое понимание работы компонентов видимо не верное. Функция auth_admin() возвращает true либо false. Но страница не отрисовывается c ошибкой:

Буду очень благодарен за помощь!

Answer 1

Мое понимание работы компонентов видимо не верное.

Действительно ваше понимание работы компонентов не верное.Не знаю где вы видели метод render внутри функциональных компонентов.

const isAdmin = ({ children }) => {
    const check = auth_admin()

    if(check){
       return {children}
    } else {
       Router.push('/admin/login')
    }
}

export default isAdmin

Метод render надо использовать только внутри классовых компонентах.Также советую вместо вашей логики использовать логику которое описано внизу.

Пример компонента:

const secretPage = ({ check }) => {
    if(check){
      return <h2>Secret value</h2>
    } else {
      return <p>You are not authenticated</p>
    }
}

Если защищенных страниц будет много можем просто перенести эту логику в компоненты высшего порядка.

export default function(Component){
  return class checkAuth extends Component {
     renderProtectedPage = () => {
         const { check } = this.props;

         if(check){
            return <Component {...this.props} />
         } else {
            return <p>You are not authenticated</p>
         }

     }
     render(){
        return this.renderProtectedPage();
     }
  }
}

И в конце импортируем наш HOC и пишем так:

import checkAuth from "./";

const secretPage = () => {
    return <p>You are not authenticated</p>
}

export default checkAuth(secretPage);

БЛОГ НА HUSL

Next.js Компонент для проверки доступа к странице

Ответы (1 шт):