Skip to content

Commit 8935461

Browse files
author
chenghao
committed
页面跳转权限验证
1 parent 2a34911 commit 8935461

File tree

4 files changed

+97
-75
lines changed

4 files changed

+97
-75
lines changed

‎README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,3 +173,7 @@ npm run build
173173
- 增加路径别名
174174
- 使用@别名处理引入组件相对路径过长问题。
175175
- 缺点：编辑器不能使用快捷提示和快捷跳转到相应的文件
176+
#### 2017-08-13
177+
- 权限管理模块增加页面跳转权限验证
178+
- 点击权限管理的路由拦截，若没有访问权限则会跳转到404页面。
179+
- 大致实现方式：通过向自定义router组件传入store，登录之后可获取到redux中的权限state数据，并通过判断是否包含权限进行跳转。ps: 该demo的效果是管理员登录之后才能跳转到路由拦截页面。具体操作请拉取代码尝试。

‎src/components/auth/RouterEnter.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ class RouterEnter extends Component {
1919
<Row>
2020
<Col span={24}>
2121
<Card bordered={false} bodyStyle={{minHeight: 600}}>
22-
<h2 style={{height: 500}} className="center">还在开发中，等下就来</h2>
22+
<h2 style={{height: 500}} className="center">只有管理员登录才能看到该页面，否则跳转到404页面</h2>
2323
</Card>
2424
</Col>
2525
</Row>

‎src/index.js

Lines changed: 2 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,15 @@
11
import React from 'react';
22
import ReactDOM from 'react-dom';
3-
import App from './App';
43
import './index.css';
54
import './style/lib/animate.css';
6-
import { Router, Route, hashHistory, IndexRedirect } from 'react-router';
7-
import Page from './components/Page';
8-
import BasicForm from './components/forms/BasicForm';
9-
import BasicTable from './components/tables/BasicTables';
10-
import AdvancedTable from './components/tables/AdvancedTables';
11-
import AsynchronousTable from './components/tables/AsynchronousTable';
12-
import Login from './components/pages/Login';
13-
import Echarts from './components/charts/Echarts';
14-
import Recharts from './components/charts/Recharts';
15-
import Icons from './components/ui/Icons';
16-
import Buttons from './components/ui/Buttons';
17-
import Spins from './components/ui/Spins';
18-
import Modals from './components/ui/Modals';
19-
import Notifications from './components/ui/Notifications';
20-
import Tabs from './components/ui/Tabs';
21-
import Banners from './components/ui/banners';
22-
import Drags from './components/ui/Draggable';
23-
import Dashboard from './components/dashboard/Dashboard';
24-
import Gallery from './components/ui/Gallery';
25-
import NotFound from './components/pages/NotFound';
26-
import BasicAnimations from './components/animation/BasicAnimations';
27-
import ExampleAnimations from './components/animation/ExampleAnimations';
285
import registerServiceWorker from './registerServiceWorker';
296
import { Provider } from 'react-redux';
307
import thunk from 'redux-thunk';
318
import { createStore, applyMiddleware } from 'redux';
329
import reducer from './reducer';
33-
import AuthBasic from './components/auth/Basic';
34-
import RouterEnter from './components/auth/RouterEnter';
3510

36-
const Wysiwyg = (___location, cb) => { // 按需加载富文本配置
37-
require.ensure([], require => {
38-
cb(null, require('./components/ui/Wysiwyg').default);
39-
}, 'Wysiwyg');
40-
};
11+
import CRouter from './routes';
4112

42-
const routes =
43-
<Route path={'/'} components={Page}>
44-
<IndexRedirect to="/app/dashboard/index" />
45-
<Route path={'app'} component={App}>
46-
<Route path={'form'}>
47-
<Route path={'basicForm'} component={BasicForm} />
48-
</Route>
49-
<Route path={'table'}>
50-
<Route path={'basicTable'} component={BasicTable} />
51-
<Route path={'advancedTable'} components={AdvancedTable} />
52-
<Route path={'asynchronousTable'} components={AsynchronousTable} />
53-
</Route>
54-
<Route path={'chart'}>
55-
<Route path={'echarts'} component={Echarts} />
56-
<Route path={'recharts'} component={Recharts} />
57-
</Route>
58-
<Route path={'ui'}>
59-
<Route path={'icons'} component={Icons} />
60-
<Route path={'buttons'} component={Buttons} />
61-
<Route path={'spins'} component={Spins} />
62-
<Route path={'modals'} component={Modals} />
63-
<Route path={'notifications'} component={Notifications} />
64-
<Route path={'tabs'} component={Tabs} />
65-
<Route path={'banners'} component={Banners} />
66-
<Route path={'wysiwyg'} getComponent={Wysiwyg} />
67-
<Route path={'drags'} component={Drags} />
68-
<Route path={'gallery'} component={Gallery} />
69-
</Route>
70-
<Route path={'animation'}>
71-
<Route path={'basicAnimations'} component={BasicAnimations} />
72-
<Route path={'exampleAnimations'} component={ExampleAnimations} />
73-
</Route>
74-
<Route path={'dashboard/index'} component={Dashboard} />
75-
<Route path="auth">
76-
<Route path="basic" component={AuthBasic} />
77-
<Route path="routerEnter" component={RouterEnter} />
78-
</Route>
79-
</Route>
80-
<Route path={'login'} components={Login} />
81-
<Route path={'404'} component={NotFound} />
82-
</Route>;
8313

8414
// redux 注入操作
8515
const middleware = [thunk];
@@ -88,9 +18,7 @@ console.log(store.getState());
8818

8919
ReactDOM.render(
9020
<Provider store={store}>
91-
<Router history={hashHistory}>
92-
{routes}
93-
</Router>
21+
<CRouter store={store} />
9422
</Provider>
9523
,
9624
document.getElementById('root')

‎src/routes/index.js

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
/**
2+
* Created by 叶子 on 2017/8/13.
3+
*/
4+
import React, { Component } from 'react';
5+
import { Router, Route, hashHistory, IndexRedirect } from 'react-router';
6+
import App from '../App';
7+
import Page from '../components/Page';
8+
import BasicForm from '../components/forms/BasicForm';
9+
import BasicTable from '../components/tables/BasicTables';
10+
import AdvancedTable from '../components/tables/AdvancedTables';
11+
import AsynchronousTable from '../components/tables/AsynchronousTable';
12+
import Login from '../components/pages/Login';
13+
import Echarts from '../components/charts/Echarts';
14+
import Recharts from '../components/charts/Recharts';
15+
import Icons from '../components/ui/Icons';
16+
import Buttons from '../components/ui/Buttons';
17+
import Spins from '../components/ui/Spins';
18+
import Modals from '../components/ui/Modals';
19+
import Notifications from '../components/ui/Notifications';
20+
import Tabs from '../components/ui/Tabs';
21+
import Banners from '../components/ui/banners';
22+
import Drags from '../components/ui/Draggable';
23+
import Dashboard from '../components/dashboard/Dashboard';
24+
import Gallery from '../components/ui/Gallery';
25+
import NotFound from '../components/pages/NotFound';
26+
import BasicAnimations from '../components/animation/BasicAnimations';
27+
import ExampleAnimations from '../components/animation/ExampleAnimations';
28+
import AuthBasic from '../components/auth/Basic';
29+
import RouterEnter from '../components/auth/RouterEnter';
30+
31+
const Wysiwyg = (___location, cb) => { // 按需加载富文本配置
32+
require.ensure([], require => {
33+
cb(null, require('../components/ui/Wysiwyg').default);
34+
}, 'Wysiwyg');
35+
};
36+
37+
export default class CRouter extends Component {
38+
requireAuth = (permission, component) => {
39+
const { store } = this.props;
40+
const { auth } = store.getState().httpData;
41+
if (!auth || !auth.data.permissions.includes(permission)) window.___location.hash = '/404';
42+
return component;
43+
};
44+
render() {
45+
return (
46+
<Router history={hashHistory}>
47+
<Route path={'/'} components={Page}>
48+
<IndexRedirect to="/app/dashboard/index" />
49+
<Route path={'app'} component={App}>
50+
<Route path={'form'}>
51+
<Route path={'basicForm'} component={BasicForm} />
52+
</Route>
53+
<Route path={'table'}>
54+
<Route path={'basicTable'} component={BasicTable} />
55+
<Route path={'advancedTable'} components={AdvancedTable} />
56+
<Route path={'asynchronousTable'} components={AsynchronousTable} />
57+
</Route>
58+
<Route path={'chart'}>
59+
<Route path={'echarts'} component={Echarts} />
60+
<Route path={'recharts'} component={Recharts} />
61+
</Route>
62+
<Route path={'ui'}>
63+
<Route path={'icons'} component={Icons} />
64+
<Route path={'buttons'} component={Buttons} />
65+
<Route path={'spins'} component={Spins} />
66+
<Route path={'modals'} component={Modals} />
67+
<Route path={'notifications'} component={Notifications} />
68+
<Route path={'tabs'} component={Tabs} />
69+
<Route path={'banners'} component={Banners} />
70+
<Route path={'wysiwyg'} getComponent={Wysiwyg} />
71+
<Route path={'drags'} component={Drags} />
72+
<Route path={'gallery'} component={Gallery} />
73+
</Route>
74+
<Route path={'animation'}>
75+
<Route path={'basicAnimations'} component={BasicAnimations} />
76+
<Route path={'exampleAnimations'} component={ExampleAnimations} />
77+
</Route>
78+
<Route path={'dashboard/index'} component={Dashboard} />
79+
<Route path="auth">
80+
<Route path="basic" component={AuthBasic} />
81+
<Route path="routerEnter" component={() => this.requireAuth('auth/testPage', <RouterEnter />)} />
82+
</Route>
83+
</Route>
84+
<Route path={'login'} components={Login} />
85+
<Route path={'404'} component={NotFound} />
86+
</Route>
87+
</Router>
88+
)
89+
}
90+
}

0 commit comments

Comments
 (0)