getServerSideProps 不适用于所有页面的重定向

Question

如果我没有令牌，我不想访问所有页面，然后重定向到 /login

在我添加的_app,js文件中

  export const getServerSideProps = async () => {
      return {
        props: {},
        redirect: { destination: "/login" },
      };
    }

然后我运行 npm 运行构建并启动但是 getServerSideProps 重定向对任何页面都不起作用

也许我创建的版本不正确生产模式 ?

Answer 1

你不需要使用它来硬编码“/login”你可以很容易地将它写在你的组件中，getServerSideProps 函数的要点是从后端获取数据并预加载数据

Answer 2

很遗憾，_app 文件目前不支持 getServerSideProps。您可以查看 this document 以供参考。

但是我们可以用getInitialProps

达到同样的效果

App.getInitialProps = (ctx) => {
    //TODO: Check authenticated value in cookies or somewhere in your code
    const isAuthenticated = false

    if(!isAuthenticated) {
      if(typeof window === 'undefined'){ //server-side rendering
        res.redirect('/login')
        res.end()
        return {}
      } else { //client-side rendering
        Router.push('/login')
        return {}
      }
    }
    
    return {
       props: {}
    }
}

再次关注 this document

Adding a custom getInitialProps in your App will disable Automatic Static Optimization in pages without Static Generation.

你也需要考虑这个trade-off。

如果你想在没有这些副作用的情况下处理它。我建议您使用 Context API。你的_app.js可能是这样的

const App = ({ Component, pageProps }) => {
  return <AuthenticationProvider>
     <Component {...pageProps}/>
  </AuthenticationProvider>
}

之后，您可以在 AuthenticationProvider 中执行一些重定向操作，这些操作将应用于所有页面

getServerSideProps 不适用于所有页面的重定向

getServerSideProps doesn't work redirect for all pages

javascript

reactjs

next.js