【问题标题】:How to protect route in the server如何保护服务器中的路由
【发布时间】:2020-07-15 22:53:30
【问题描述】:

我已进行身份验证,我使用快速会话和护照。所以当用户登录时会将会话保存在服务器上。访问路由需要这个会话。我创建的会话将其保存在 redux 存储中,当我检查 getInitialProps 时有 redux store 如果用户未登录,我想将其用作参考,它将重定向到登录页面。

,在这种情况下,网址已更改,但我无法访问。

此页面无法正常工作 localhost 将您重定向了太多次。 尝试清除您的 cookie。 ERR_TOO_MANY_REDIRECTS

我不能使用'next/router',因为路由器只能在客户端访问。

_app.js

import App, { Container } from 'next/app'
import React from 'react'
import withReduxStore from '../lib/with-redux-store'
import { Provider } from 'react-redux'
import { MuiThemeProvider } from '@material-ui/core/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import JssProvider from 'react-jss/lib/JssProvider';
import getPageContext from '../lib/getPageContext';
import  '../index.css';

class MyApp extends App {
  static async getInitialProps(something){
    const { Component, router, ctx } = something;
    const initialState = ctx.reduxStore.getState();

    if(Object.keys(initialState.auths.admin).length === 0){
      ctx.res.writeHead(302, {
        Location: '/login'
      });
      ctx.res.end();
      res.finished = true;
      return {}
    }
    let pageProps = {}
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx)
    }
    return { pageProps }
  }

  constructor() {
    super();

    this.pageContext = getPageContext();
   
  }
  componentDidMount() {

    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles && jssStyles.parentNode) {
      jssStyles.parentNode.removeChild(jssStyles);
    }
  }

  render() {
    const { Component, pageProps, reduxStore } = this.props
  
    return (
      <Container>
        <Provider store={reduxStore}>
          <JssProvider
            registry={this.pageContext.sheetsRegistry}
            generateClassName={this.pageContext.generateClassName}
          >
            <MuiThemeProvider
              theme={this.pageContext.theme}
              sheetsManager={this.pageContext.sheetsManager}
            >
              <CssBaseline />
              <Component 
              pageContext={this.pageContext} 
              {...pageProps} />
            </MuiThemeProvider>
          </JssProvider>
        </Provider>
      </Container>
    )
  }
}

export default withReduxStore(MyApp)

【问题讨论】:

    标签: javascript reactjs next.js


    【解决方案1】:

    错误“重定向过多”意味着网站一直在 以永远不会的方式在不同地址之间重定向 完全的。通常这是竞争重定向的结果,一个尝试 强制 HTTPS(SSL)和另一个重定向回 HTTP(非 SSL), 或在网址的 www 和非 www 形式之间。

    在这种情况下,如果 Object.keys(initialState.auths.admin).length === 0,用户将在无限循环中被重定向到“/login”。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2016-09-04
      • 1970-01-01
      • 2021-04-30
      • 2016-06-07
      • 2021-11-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多