總體概述
一個(gè)完善的路由系統(tǒng)應(yīng)該是這樣子的，當(dāng)鏈接到的組件是需要登錄后才能查看，要能夠跳轉(zhuǎn)到登錄頁(yè)，然后登錄成功后又跳回來(lái)之前想訪問的頁(yè)面。這里主要是用一個(gè)權(quán)限控制類來(lái)定義路由路由信息，同時(shí)用redux把登錄成功后要訪問的路由地址給保存起來(lái)，登錄成功時(shí)看redux里面有沒有存地址，如果沒有存地址就跳轉(zhuǎn)到默認(rèn)路由地址。
路由權(quán)限控制類
在這個(gè)方法里面，通過(guò)sessionStorage判斷是否登錄了，如果沒有登錄，就保存一下當(dāng)前想要跳轉(zhuǎn)的路由到redux里面。然后跳轉(zhuǎn)到我們登錄頁(yè)。
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
路由定義信息
路由信息也很簡(jiǎn)單。只是對(duì)需要登錄后才能查看的路由用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> <div> <Switch> <Route path="/login" component={Login} /> <Redirect from="/" exact to="/login"/>{/*注意redirect轉(zhuǎn)向的地址要先定義好路由*/} <AuthorizedRoute path="/layout" component={Layout} /> <Route component={NoFound}/> </Switch> </div> </BrowserRouter>)登錄頁(yè)
就是把存在redux里面的地址給取出來(lái)，登錄成功后就跳轉(zhuǎn)過(guò)去，如果沒有就跳轉(zhuǎn)到默認(rèn)頁(yè)面，我這里是默認(rèn)跳到主頁(yè)。因?yàn)橛昧薬ntd的表單，代碼有點(diǎn)長(zhǎng)，只需要看連接redux那兩句和handleSubmit里面的內(nèi)容。
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)) 順便說(shuō)一下這里redux的使用吧。我暫時(shí)只會(huì)基本使用方法：定義reducer，定義actions,創(chuàng)建store，然后在需要使用redux的變量時(shí)候去connect一下redux，需要dispatch改變變量時(shí)，就直接把a(bǔ)ctions里面的方法引入，直接調(diào)用就可以啦。為了讓actions和reducer里面的事件名稱對(duì)的上，怕打錯(cuò)字和便于后面修改吧，我建了個(gè)actionsEvent.js來(lái)存放事件名稱。
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 loginRedirectPathactions:
import store from '../store'import * as ActionEvent from '../constants/actionsEvent'export const setLoginRedirectUrl = (toPath) => { return store.dispatch({ type: ActionEvent.Login_Redirect_Event, toPath: toPath })}創(chuàng)建store
import { createStore, combineReducers } from 'redux'import loginReducer from './reducer/loginReducer'const reducers = combineReducers({ loginState: loginReducer //這里的屬性名loginState對(duì)應(yīng)于connect取出來(lái)的屬性名})const store = createStore(reducers)export default store差點(diǎn)忘記說(shuō)了，路由控制類AuthorizedRoute參考了https://codepen.io/bradwestfall/project/editor/XWNWge?preview_height=50&open_file=src/app.js 這里的代碼。感覺這份代碼挺不錯(cuò)的，我一開始不會(huì)做就是看懂它才有點(diǎn)思路。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
