대응 - 로그인 및 인증을 처리하는 가장 좋은 방법은 무엇입니까?

대응 - 로그인 및 인증을 처리하는 가장 좋은 방법은 무엇입니까?

인증/로그인이 있는 응용 프로그램에서 반응 및 작업하는 새로운 기능.현재는 동작하고 있습니다만, 함께 해킹을 당한 것 같습니다. 있는 게 있어요.isAuthenticated 안에 있는 routes.js다음과 같이 합니다.

class Routes extends Component {

    constructor(props) {
        super(props);

        this.state = {
            isAuthenticated: false,
         }
     }

.이러한 사용자를 「」로 할 수 있습니다.home 이 「」의하게 하는 입니까. 액세스와 조작을 허용하는 가장 좋은 디자인 패턴은 무엇입니까?isAuthenticated되어 있습니까?「 」의 상태를 ? 현재 어떻게 설정되어 있는지요.이 기능을 통해 내부 상태를 설정할 수 있습니다.routes.js하다

 setAuthenticated = (isAuthenticated) => {
        this.setState({isAuthenticated});
    }

아래 라우터에서...

<Route path="/" exact component={() =>
                            <div>
                                <Login
                                    isAuthenticated={this.state.isAuthenticated}
                                    setAuthenticated={this.setAuthenticated}
                            </div>
                        } />

네, 저는 이것이 불변의 소품 값을 바꾸는 것이기 때문에 나쁜 디자인이라는 것을 이해합니다.도 안 요. 제가 이때. 왜냐하면 이 값을 변경하면login.js불필요한 재검토의 원인이 됩니다.요?isAuthenticated떤떤 종류 ?? 로? ???참고로 저는 국가 관리를 이용하지 않습니다.

설정 중: 설정 중isAuthenticated로그인/비밀번호의 올바른 조합을 확인하는 서버로부터의 응답을 기반으로 합니다.

★★isAuthenticated 는 사용자가 페이지를 갱신할 때마다 인증되지 않음을 의미합니다.그것은 그다지 사용하기 쉬운 것이 아닙니다. :)

따라서 [Login]페이지에는 (백엔드에서) 또는 브라우저에 저장되어 있어야 합니다.안access_token는 사용자가 인증되었음을 증명하고 사용자의 ID도 검증합니다. 이 시험은 하게 됩니다.access_token이 사용자가 요청 중인 데이터에 액세스할 수 있는지 또는 작성, 편집 및 삭제하려는 항목을 작성, 편집 및 삭제할 수 있는지 확인합니다.

다음 이 를 켜시면 .access_token다른 모든 페이지에도 표시되며 사용자가 더 이상 인증되지 않은 경우 로그인 페이지로 리디렉션됩니다.

---

와의 차이에 대한 간략한 설명은 차치하고, 아래의 코드를 이해하는 데 도움이 되지만, 이미 익숙하다면 자유롭게 넘어갈 수 있습니다.

백엔드에서는 현재 가장 일반적인 인증 프로토콜인 를 사용하고 있을 것입니다.와 함께OAuth2인증할 사용자의 사용자 이름과 비밀번호를 포함한 첫 번째 요청을 서버에 보냅니다.1 """를 1) """를 받습니다."""access_token은 1시간되며 2) (1시간 후에 기한이 만료됩니다)refresh_token매우 긴 시간(시간, 일) 후에 기한이 만료됩니다.?access_tokenexpires는 에서 "사용자 이름 및 비밀번호를 다시 묻는 "사용자 이름"을 보냅니다.refresh_token 버버 to a a a a a a a a a a를 합니다.access_token이 사용자의 경우.

---

와의 차이점에 대한 간단한 설명은 차치하고, 부담없이 건너뛸 수 있습니다!

localStorage둘 사이의 최신 기술입니다. 지속 키/값 지속성이 에 키/값 지속성, 키/값 지속성, 키/값 지속성, 키/값 지속성 등을 저장할 수 있습니다.access_token을 사용하다하지만 유통기한도 유지해야 합니다. 키 ᄃ다 키/값 쌍을 할 수 .expires하지만 우리 쪽에서 처리하는 게 더 논리적이겠죠

반,는cookies이 expires로로우 리필요요 !!!!! !!!!!!cookies오래된 테크놀로지이고 개발자 친화적이지 않기 때문에 개인적으로는 작은 라이브러리인 를 사용하여 조작합니다.cookies도 합니다: 키/값 지속 시스템입니다.Cookies.set('access_token', value)Cookies.get('access_token').

기타 :cookies: 크로스 서브도메인입니다!로그인 앱이login.mycompany.com 은 ★★★★★★★★★★★★★★★★★★★★★★★★★★★」app.mycompany.com 해서 ''를 만들 수 있어요.cookie이치 this this this this this this this this this this this this this this this this this this this this this 。LocalStorage.

---

인증에 사용하는 방법 및 특수 React 컴포넌트는 다음과 같습니다.

isAuthenticated()

import Cookies from 'js-cookie'

export const getAccessToken = () => Cookies.get('access_token')
export const getRefreshToken = () => Cookies.get('refresh_token')
export const isAuthenticated = () => !!getAccessToken()

인증()

export const authenticate = async () => {
  if (getRefreshToken()) {
    try {
      const tokens = await refreshTokens() // call an API, returns tokens

      const expires = (tokens.expires_in || 60 * 60) * 1000
      const inOneHour = new Date(new Date().getTime() + expires)

      // you will have the exact same setters in your Login page/app too
      Cookies.set('access_token', tokens.access_token, { expires: inOneHour })
      Cookies.set('refresh_token', tokens.refresh_token)

      return true
    } catch (error) {
      redirectToLogin()
      return false
    }
  }

  redirectToLogin()
  return false
}

redirect To Login()

const redirectToLogin = () => {
  window.location.replace(
    `${getConfig().LOGIN_URL}?next=${window.location.href}`
  )
  // or history.push('/login') if your Login page is inside the same app
}

Authenticated Route(인증 루트)

export const AuthenticatedRoute = ({
  component: Component,
  exact,
  path,
}) => (
  <Route
    exact={exact}
    path={path}
    render={props =>
      isAuthenticated() ? (
        <Component {...props} />
      ) : (
        <AuthenticateBeforeRender render={() => <Component {...props} />} />
      )
    }
  />
)

Authenticate Before Render

class AuthenticateBeforeRender extends Component {
  state = {
    isAuthenticated: false,
  }

  componentDidMount() {
    authenticate().then(isAuthenticated => {
      this.setState({ isAuthenticated })
    })
  }

  render() {
    return this.state.isAuthenticated ? this.props.render() : null
  }
}

인증이 1 세션 동안만 지속되는 응용 프로그램을 사용하는 경우 상태로 저장하면 됩니다.단, 이는 사용자가 페이지 새로 고침 시 인증된 상태를 잃게 된다는 것을 의미합니다.

은 리액트 콘텍스트를 입니다. 리액트 콘텍스트를 사용하여 .이 예에서는 다음 명령어를 사용하여 콘텍스트를 만듭니다.createContext를 사용합니다.Consumer응용 프로그램을 통해 액세스할 수 있습니다.

const AuthenticationContext = React.createContext();
const { Provider, Consumer } = AuthenticationContext;

function Login(props) {
  return (
    <Consumer>
      {
        value=>
        <button onClick={value.login}>Login</button>
      }
    </Consumer>
  );
}

function Logout() {
  return (
    <Consumer>
      {
        value=>
        <button onClick={value.logout}>Logout</button>
      }
    </Consumer>
  );
}

function AnotherComponent() {
  return (
    <Consumer>
      {
        value=>{
          return value.isAuthenticated?
            <p>Logged in</p>:
            <p>Not Logged in</p>
        }
      }
    </Consumer>
  );
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.login = ()=> {
      this.setState({
        isAuthenticated: true
      });
    }
    this.logout = ()=> {
      this.setState({
        isAuthenticated: false
      });
    }
    this.state = {
      isAuthenticated: false,
      login: this.login,
      logout: this.logout
    }
  }
  
  render() {
    return (
      <Provider value={this.state}>
        <Login />
        <Logout />
        <AnotherComponent />
      </Provider>
    );
  }
}
ReactDOM.render(<App />, document.getElementById("root"));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div> 

https://reactjs.org/docs/context.html#reactcreatecontext

로컬 스토리지에서 로그인 시 액세스 토큰을 설정하고 사용자가 로그아웃한 후 토큰을 클리어할 수 있습니다.인증된 메서드를 사용하여 API 호출 중에 토큰이 있는지 및 토큰이 유효한지 여부를 확인합니다.

「 」를 중 입니다.React-Auth-Kit할 수 있는 있습니다.리액션과 함께 사용할 수 있는 모든 기능을 갖추고 있습니다.

링크: https://www.npmjs.com/package/react-auth-kit

언급URL : https://stackoverflow.com/questions/49819183/react-what-is-the-best-way-to-handle-login-and-authentication