当用户未登录时重定向到登录.反应 [英] When user is not logged in redirect to login. Reactjs

问题描述

我的应用看起来像:

类应用扩展组件{使成为() {<路由器>
<路由确切路径='/login'组件={Login}/><路由确切路径='/game'组件={GameContainer}/><路由确切路径='/chat'组件={ChatContainer}/><路由确切路径='/info'组件={InfoContainer}/></div></路由器>}

如果用户访问/game 下的页面并且没有登录，我想将他们重定向到登录页面.

如何在所有路由器中优雅地做到这一点?

解决方案

查看这个答案 https://stackoverflow.com/a/43171515/208079.也许比我有更多代表的人可以将其标记为重复.

基本思想是使用自定义组件(下例中的 PrivateRoute)包装需要身份验证的路由.PrivateRoute 将使用一些逻辑来确定用户是否经过身份验证，然后要么；允许请求的路由呈现，或重定向到登录页面.

此链接的 react-router 培训文档中也对此进行了描述 https://reacttraining.com/react-router/web/example/auth-workflow.

这是一个以上述为灵感的实现.

在 App.js 中(或您的路由发生的地方)

import React, { Component } from 'react'从 'react-router-dom' 导入 { BrowserRouter as Router, Route }从./PrivateRoute"导入 PrivateRoute从../src/MyComponent"导入 MyComponent从../src/MyLoginForm"导入 MyLoginForm<路由器><Route path="/login" 组件={MyLoginForm}/><PrivateRoute path="/onlyAuthorizedAllowedHere/" 组件={MyComponent}/></路由器>

还有 PrivateRoute 组件

//这用于确定用户是否经过身份验证和//如果他们被允许访问他们导航到的页面.//如果是:他们进入页面//如果不是:它们被重定向到登录页面.从反应"导入反应从./Services/AuthService"导入 AuthService从'react-router-dom'导入{重定向，路由}const PrivateRoute = ({ component: Component, ...rest }) =>{//在下面的行中添加您自己的身份验证.常量 isLoggedIn = AuthService.isLoggedIn()返回 (<路线{...休息}渲染={道具=>是否登录?(<组件 {...props}/>) : (<重定向到={{ pathname: '/login', state: { from: props.location } }}/>)}/>)}导出默认 PrivateRoute

My App looks like:

class App extends Component {
  render() {
    <Router>
      <div>
      <Route exact path='/login' component={Login} />
      <Route exact path='/game' component={GameContainer} />
      <Route exact path='/chat' component={ChatContainer} />
      <Route exact path='/info' component={InfoContainer} />
    </div>
    </Router>  
  }

If the user visits a page under /game and is not logged in, I want to redirect them to the login page.

How to do it an elegant way in all routers?

解决方案

See this answer https://stackoverflow.com/a/43171515/208079. Perhaps someone with more rep than me can mark this as a duplicate.

The basic idea is to wrap routes that require authentication with a custom component (PrivateRoute in the example below). PrivateRoute will use some logic to determine if the user is authenticated and then either; allow the requested route to render, or redirect to the login page.

This is also described in the react-router training docs at this link https://reacttraining.com/react-router/web/example/auth-workflow.

Here is an implementation using the above as inspiration.

In App.js (or where your routing is happening)

import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import PrivateRoute from './PrivateRoute'
import MyComponent from '../src/MyComponent'
import MyLoginForm from '../src/MyLoginForm'

<Router>
  <Route path="/login" component={MyLoginForm} />
  <PrivateRoute path="/onlyAuthorizedAllowedHere/" component={MyComponent} />
</Router>

And the PrivateRoute Component

// This is used to determine if a user is authenticated and
// if they are allowed to visit the page they navigated to.

// If they are: they proceed to the page
// If not: they are redirected to the login page.
import React from 'react'
import AuthService from './Services/AuthService'
import { Redirect, Route } from 'react-router-dom'

const PrivateRoute = ({ component: Component, ...rest }) => {

  // Add your own authentication on the below line.
  const isLoggedIn = AuthService.isLoggedIn()

  return (
    <Route
      {...rest}
      render={props =>
        isLoggedIn ? (
          <Component {...props} />
        ) : (
          <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )
      }
    />
  )
}

export default PrivateRoute

这篇关于当用户未登录时重定向到登录.反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！