nextjs通过使用getServerSideProps实现登录后跳转上一页

在实际开发中，经常遇到登录后跳转到之前的页面，可使用getServerSideProps实现该功能，getServerSideProps 是 next.js 中的一项特色功能，可以让我们在给页面设置一些初始的 props 参数。

getServerSideProps 是定义在页面中的 API，但是其执行环境是 node 端，而不是客户端，一般常见使用场景为：

页面前置权限校验
页面必备参数获取

使用时需要在对应的 page 文件中 export getServerSideProps

复制代码

const Page = props => {
// 登录
  const login = async () => {
    const data = {
      account: mobile ? mobile : email,
      password: pwd,
      clientType: 2,  //客户端类型
      AreaCode: '+' + areaCode,
      ClientMark: guid(),
      Ip: ip
    }
    const re = /^\w+@[a-z0-9]+\.[a-z]{2,4}$/
    const myreg = /^\d+(.\d{1,2})?$/
    if (index == 1) {
      if (areaCode == '') {
        Toast.show({ content: lang['请选择国家'] })
        return
      }
      if (!myreg.test(mobile)) {
        Toast.show({ content: lang['手机号码输入错误'] })
        return
      }
    } else if (index == 2) {
      // if (!re.test(email)) {
      //   Toast.show({ content: lang['电子邮箱输入错误'] })
      //   return
      // }
    }
    const rep = await props.user.login(data)
    if (!rep.success) {
      Toast.show({ content: rep.error.message })
    } else {
      setToken(rep.result.token)
      setAreaCodeLang(areaCode)
      props.user.token = rep.result.token
      getUserInfo()
      setTimeout(() => {
        props.ws.reconnect()
        if (props.prevPageHeader.referer && pathname != '/login' ) {
          back()
        } else {
          push('/user')
        }
      }, 1000);
    }
  }
    return <div>page</div>;
};
export async function getServerSideProps(context) {
    return {
        props: {
        	prevPageHeader: context.req.headers,
        }
    };
}
export default Page;

这样便可以从页面组件中直接使用 props 来获取 getServerSideProps 注入的 props 了。上述代码就把context.req.headers注入了props中，可以通过context.req.headers中的referer获取到上一个页面的路由地址，从而实现登录后跳转到上一页。

注意：

直接在地址栏中输入地址进行跳转的context.req.headers.referer会没有值。
有些特殊页面，例如登录页登录的，上一页为登录页，所以不需要跳转到上一页，可以通过pathname ，判断是否是这些特殊页面而不进行跳转
getServerSideProps 只能在页面组件中使用，在其他子组件中是不能使用的。
通过npm run export 打包发布的项目不能使用getServerSideProps

与 getStaticProps 只在build时生成一遍静态页面，或者定期重新生成页面不同，使用getServerSideProps，页面在每接收到一条传入请求就重新生成一遍。

因为每次请求都是从数据库读数据重新生成页面，页面加载速度会变慢。但是使用getServerSideProps 可以访问 request 对象。

如果页面不是需要每秒更新几次，或者需要访问 request 对象，那么使用getStaticProps 函数更好。
next官网 getServerSideProps的参数信息

或者参考：https://www.geeksforgeeks.org/next-js-getserversideprops-function/