이번에는 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: 'rgba(0,0,0,.25)' }} />} placeholder="Username" /> )} </FormItem> <FormItem> {getFieldDecorator('password', { rules: [{ required: true, message: 'Please input your Password!' }], })( <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} 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))
import store from '../store' import * as ActionEvent from '../constants/actionsEvent' export const setLoginRedirectUrl = (toPath) => { return store.dispatch({ type: ActionEvent.Login_Redirect_Event, toPath: toPath }) }
import { createStore, combineReducers } from 'redux' import loginReducer from './reducer/loginReducer' const reducers = combineReducers({ loginState: loginReducer //这里的属性名loginState对应于connect取出来的属性名 }) const store = createStore(reducers) export default store
JS를 사용하여 문자열에 포함된 콘텐츠를 결정하는 방법 요약
Angular+RouterLink를 사용하여 다양한 멋진 점프 만들기
위 내용은 라우팅 권한 제어를 구현하기 위해 React Router4+Redux를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!