正文
任何问题的提出都是根据现实的问题需要，我做的项目由于页面很多，管理起来比较复杂，权限控制是必须有的，在网上也找了许多的文章，最后，经过不屑的努力实现了一个属于自己的权限控制的前端的操作流程，我们一起来看一看吧！！！
首先我们要定义自己的路由：
//登陆页的基本操作 import LoginMod from './../login/Signin' //登陆的首页 //blog import StartPage from './blog/StartPage' import FileNotFound from './blog/FileNotFound' import TechTalk from './blog/TechTalk' import AboutAuthor from './blog/AboutAuthor' import TechAritcle from './blog/TechAritcle' import AboutSite from './blog/AboutSite' import Album from './blog/Album' import CommentSite from './blog/CommentSite' //back import PrivateZone from './back/PrivateZone' import EditTopic from './back/EditTopic' export default [ { path: "/", name: "首页", component: StartPage}, { path: "/tech-talk", name: "首页", component: TechTalk}, { path: "/about-author", name: "作者", component: AboutAuthor}, { path: "/about-site", name: "关于本站", component: AboutSite}, { path: "/tech-article", name: "文章", component: TechAritcle}, { path: "/album", name: "相册", component: Album}, { path: "/comment-site", name: "留言板", component: CommentSite}, { path: "/edit-topic", name: "编辑我们的文章", component: EditTopic,auth:true}, { path: "/login", name: "登陆页的基本操作", component: LoginMod}, { path: "/private-zone", name: "个人空间的首页", component: PrivateZone,auth:true}, ]
之后，在我们在App.js里面定义我们的router，之前，我们要说一下，我们使用的是redux的store
const mapStateToProps = (state, ownProps) => { console.log("mapStateToProps",state) return { token: state.token } } export default connect(mapStateToProps)(App);
看一下我们的App.js
import React from 'react'; // import logo from './logo.svg'; import './App.css'; import { BrowserRouter as Router,Route,Switch,Link,Redirect, withRouter} from "react-router-dom"; import { connect, Provider } from 'react-redux' import Routers from './router/routers' import FileNotFound from './router/blog/FileNotFound' import zhCN from 'antd/es/locale/zh_CN'; import { ConfigProvider } from 'antd'; import { FetchDoGet } from './commons/Utils'; import store from './store/store' class App extends React.Component{ constructor(props){ super(props) this.state={ } } componentDidMount(){ } render(){ let token = this.props.token return( <ConfigProvider locale={zhCN}> <Router> <div> <Switch> {Routers.map((item,index)=>{ return ( <Route key={index} path={item.path} exact render={(props) =>{ console.log("props",props) return (!item.auth ? (<item.component {...props} />) : (token ? <item.component {...props} /> : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />) ) } }/> )//end Route })} // 所有错误路由跳转页面 <Route component={FileNotFound} /> </Switch> </div> </Router> </ConfigProvider> ) } } const mapStateToProps = (state, ownProps) => { console.log("mapStateToProps",state) return { token: state.token } } export default connect(mapStateToProps)(App);
上面的代码是至关重要的，我们利用switch，来定义我们的路由操作，当我们的token没有时，就会自动的跳转到我们的登陆页，这样也就是实现了我们的实现全局路由登陆拦截。
自定义的store:
export function createStore(initialState) { let state = initialState; const listeners = []; function setState(partial) { state = { ...state, ...partial, }; for (let i = 0; i < listeners.length; i++) { listeners[i](); } } function getState() { return state; } function subscribe(listener) { listeners.push(listener); return function unsubscribe() { const index = listeners.indexOf(listener); listeners.splice(index, 1); }; } return { setState, getState, subscribe, }; }
在另一个文件中：
import {createStore} from './StoreUtils' export default createStore({ token:"sds" })
在index.js里面定义：
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import { Provider } from 'react-redux'; import { BrowserRouter, Route } from 'react-router-dom'; import { createStore } from 'redux'; import store from './store/store' // // ReactDOM.render(<App />, document.getElementById('root')); ReactDOM.render( <BrowserRouter> <Provider store={store}> <Route component={App} /> </Provider> </BrowserRouter>, document.getElementById('root')); // If you want your app to work offline and load faster, you can change // unregister() to register() below. Note this comes with some pitfalls. // Learn more about service workers: https://bit.ly/CRA-PWA serviceWorker.unregister();
至此，我已经把所有的实现的代码都写出来了。
那么，还有一个重要啊的问题，如何管理我们的登陆的状态呢？
首先引入我们的store
import store from './store/store'
设置我们的值：
store.setState({ token:null })
就好！！！！！！！
