Next.js登录页隐藏导航栏与登录状态校验跳转问题求助

我来帮你一步步搞定这两个问题，代码修改都很直观，跟着做就行～

问题1：登录页隐藏全局Header #

核心思路是在_app.js里判断当前页面是否为登录页，然后告诉Layout组件要不要渲染Header。

步骤1：修改Layout组件，支持隐藏Header #

给Layout新增一个hideHeader属性，用来控制Header的显示逻辑：

class Layout extends Component {
  render() {
    const { children, hideHeader } = this.props
    return (
      <div className='layout'>
        {/* 只有当hideHeader为false时，才渲染Header */}
        {!hideHeader && <Header />}
        {children}
      </div>
    );
  }
}

步骤2：在_app.js中判断当前页面，传递hideHeader #

需要用withRouter包裹MyApp以获取路由信息，然后判断当前路径是否是登录页（假设你的登录页路径是/signin）：

import { withRouter } from 'next/router'
import Layout from './layout' // 确保引入路径正确

export default class MyApp extends App {
  render() {
    const { Component, pageProps, router } = this.props
    // 判断当前是否是登录页，是的话隐藏Header
    const hideHeader = router.pathname === '/signin'
    
    return (
      <Layout hideHeader={hideHeader}>
        <Component {...pageProps} />
      </Layout>
    )
  }
}

// 用withRouter包裹，让MyApp能拿到路由对象
export default withRouter(MyApp)

这样登录页就不会显示Header啦～

问题2：全局校验登录状态，未登录自动跳登录页 #

我们要在_app.js里做全局的登录校验，还要监听路由变化，确保用户切换页面时也会触发校验。

修改_app.js，添加全局登录校验逻辑 #

import { withRouter } from 'next/router'
import Layout from './layout'

export default class MyApp extends App {
  componentDidMount() {
    const { router } = this.props
    
    // 定义登录状态校验函数
    const checkLoginStatus = () => {
      // 从localStorage读取登录标识
      const isLoggedIn = localStorage.getItem('username') !== null
      const currentPath = router.pathname
      
      // 如果未登录且当前不是登录页，自动跳转到登录页
      if (!isLoggedIn && currentPath !== '/signin') {
        router.push('/signin')
      }
    }

    // 页面首次加载时先校验一次
    checkLoginStatus()

    // 监听路由切换事件，每次页面跳转都重新校验
    router.events.on('routeChangeComplete', checkLoginStatus)

    // 组件卸载时清理监听，避免内存泄漏
    this.unsubscribe = () => {
      router.events.off('routeChangeComplete', checkLoginStatus)
    }
  }

  componentWillUnmount() {
    if (this.unsubscribe) {
      this.unsubscribe()
    }
  }

  render() {
    const { Component, pageProps, router } = this.props
    const hideHeader = router.pathname === '/signin'
    
    return (
      <Layout hideHeader={hideHeader}>
        <Component {...pageProps} />
      </Layout>
    )
  }
}

export default withRouter(MyApp)

额外优化：防止已登录用户访问登录页 #

在signin.js的componentDidMount里加一段逻辑，如果用户已经登录，自动跳转到业务页面：

class Signin extends Component {
  componentDidMount() {
    const isLoggedIn = localStorage.getItem('username') !== null
    if (isLoggedIn) {
      Router.push('/appUser')
    }
  }

  // 原有的handleSubmit和render代码保持不变...
}

这样两个问题就都解决了：登录页不再显示Header，未登录状态下访问任何业务页面都会自动跳转到登录页，而且已登录用户也没法再访问登录页啦～

内容的提问来源于stack exchange，提问作者Karthi