라우팅 권한 제어를 구현하기 위해 React Router4+Redux를 사용하는 방법

이번에는 React Router4+redux를 사용하여 라우팅 권한 제어를 구현하는 방법과, React Router4+redux를 사용하여 라우팅 권한 제어를 구현할 때 주의사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다. .

개요

전체 라우팅 시스템은 로그인한 후에만 연결된 구성 요소를 볼 수 있는 경우 로그인 페이지로 이동할 수 있어야 하며 로그인 후 이전에 원하는 액세스로 다시 이동할 수 있어야 합니다. 성공적으로. 여기서는 주로 권한 제어 클래스를 사용하여 라우팅 정보를 정의하고, 동시에 redux를 사용하여 로그인 성공 후 액세스할 라우팅 주소를 저장합니다. 로그인에 성공하면 저장된 주소가 있는지 확인합니다. redux에 저장된 주소가 없으면 기본 라우팅 주소로 점프합니다.

라우팅 권한 제어 클래스

이 방법에서는 sessionStorage를 사용하여 로그인 여부를 확인합니다. 로그인되어 있지 않은 경우 redux로 이동하려는 현재 경로를 저장합니다. 그런 다음 로그인 페이지로 이동하세요.

import React from 'react'
import { Route, Redirect } from 'react-router-dom'
import { setLoginRedirectUrl } from '../actions/loginAction'
class AuthorizedRoute extends React.Component {
  render() {
    const { component: Component, ...rest } = this.props
    const isLogged = sessionStorage.getItem("userName") != null ? true : false;
    if(!isLogged) {
      setLoginRedirectUrl(this.props.location.pathname);
    }
    return (
        <Route {...rest} render={props => {
          return isLogged
              ? <Component {...props} />
              : <Redirect to="/login" />
        }} />
    )
  }
}
export default AuthorizedRoute

경로 정의정보

라우팅 정보도 매우 간단합니다. AuthorizedRoute를 사용하여 보기 위해 로그인해야 하는 경로를 정의하세요.

import React from 'react'
import { BrowserRouter, Switch, Route, Redirect } from 'react-router-dom'
import Layout from '../pages/layout/Layout'
import Login from '../pages/login/Login'
import AuthorizedRoute from './AuthorizedRoute'
import NoFound from '../pages/noFound/NoFound'
import Home from '../pages/home/Home'
import Order from '../pages/Order/Order'
import WorkOrder from '../pages/Order/WorkOrder'
export const Router = () => (
    <BrowserRouter>
      <p>
        <Switch>
          <Route path="/login" component={Login} />
          <Redirect from="/" exact to="/login"/>{/*注意redirect转向的地址要先定义好路由*/}
          <AuthorizedRoute path="/layout" component={Layout} />
          <Route component={NoFound}/>
        </Switch>
      </p>
    </BrowserRouter>
)

로그인 페이지

는 redux에 저장된 주소를 꺼내는 것입니다. 로그인에 성공하면 해당 주소로 이동합니다. 그렇지 않으면 기본 페이지로 이동합니다. antd 형식을 사용하기 때문에 코드가 조금 길지만, redux와 handlerSubmit의 내용을 연결하는 두 문장만 보시면 됩니다.

import React from 'react'
import './Login.css'
import { login } from '../../mock/mock'
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux'
const FormItem = Form.Item;
class NormalLoginForm extends React.Component {
  constructor(props) {
    super(props);
    this.isLogging = false;
  }
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        this.isLogging = true;
        login(values).then(() => {
          this.isLogging = false;
          let toPath = this.props.toPath === '' ? '/layout/home' : this.props.toPath
          this.props.history.push(toPath);
        })
      }
    });
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
        <Form onSubmit={this.handleSubmit.bind(this)} className="login-form">
          <FormItem>
            {getFieldDecorator('userName', {
              rules: [{ required: true, message: 'Please input your username!' }],
            })(
                <Input prefix={<Icon type="user" style={{ color: &#39;rgba(0,0,0,.25)&#39; }} />} placeholder="Username" />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('password', {
              rules: [{ required: true, message: 'Please input your Password!' }],
            })(
                <Input prefix={<Icon type="lock" style={{ color: &#39;rgba(0,0,0,.25)&#39; }} />} type="password" placeholder="Password" />
            )}
          </FormItem>
          <FormItem>
            {getFieldDecorator('remember', {
              valuePropName: 'checked',
              initialValue: true,
            })(
                <Checkbox>Remember me</Checkbox>
            )}
            <a className="login-form-forgot" href="">Forgot password</a>
            <Button type="primary" htmlType="submit" className="login-form-button"
                loading={this.isLogging ? true : false}>
              {this.isLogging ? 'Loging' : 'Login'}
            </Button>
            Or <a href="">register now!</a>
          </FormItem>
        </Form>
    );
  }
}
const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
const loginState = ({ loginState }) => ({
  toPath: loginState.toPath
})
export default withRouter(connect(
    loginState
)(WrappedNormalLoginForm))

그나저나 여기서는 redux의 사용법에 대해 이야기해보겠습니다. 일단은 리듀서 정의, 액션 정의, 스토어 생성, 그리고 redux 변수를 사용해야 할 때 redux 연결 등의 기본적인 메소드만 사용합니다. 조치를 취하고 직접 전화하십시오. 액션과 리듀서의 이벤트 이름을 일치시키기 위해 오타에 대한 두려움과 나중에 수정하기 쉽도록 이벤트 이름을 저장할 actionsEvent.js를 만들었습니다.

reducer:

import * as ActionEvent from '../constants/actionsEvent'
const initialState = {
  toPath: ''
}
const loginRedirectPath = (state = initialState, action) => {
  if(action.type === ActionEvent.Login_Redirect_Event) {
    return Object.assign({}, state, {
      toPath: action.toPath
    })
  }
  return state;
}
export default loginRedirectPath

actions:

import store from '../store'
import * as ActionEvent from '../constants/actionsEvent'
export const setLoginRedirectUrl = (toPath) => {
  return store.dispatch({
         type: ActionEvent.Login_Redirect_Event,
        toPath: toPath
       })
}

Create store

import { createStore, combineReducers } from 'redux'
import loginReducer from './reducer/loginReducer'
const reducers = combineReducers({
  loginState: loginReducer //这里的属性名loginState对应于connect取出来的属性名
})
const store = createStore(reducers)
export default store

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 자료:

JS를 사용하여 문자열에 포함된 콘텐츠를 결정하는 방법 요약

Angular+RouterLink를 사용하여 다양한 멋진 점프 만들기

위 내용은 라우팅 권한 제어를 구현하기 위해 React Router4+Redux를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!