Skip to content

Commit 5d11760

Browse files
deotdeot
committed
opti(templates): manager(hooks, global)
1 parent 9396d8a commit 5d11760

File tree

10 files changed

+111
-143
lines changed

10 files changed

+111
-143
lines changed

‎templates/src/pages/components/__tpl__/paging-native/item.vue

-3
Original file line numberDiff line numberDiff line change
@@ -49,9 +49,6 @@
4949
5050
export default {
5151
name: 'vc-fragment-item',
52-
components: {
53-
'vc-fragment': Fragment
54-
},
5552
props: {
5653
dataSource: {
5754
type: Array,

‎templates/src/pages/components/login/content.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
import { mapState } from 'vuex';
2525
import { Message } from '@wya/vc';
2626
import { Storage } from '@utils/utils';
27-
import { createLoginAuth } from '@routers/hooks';
27+
import { Global } from '@routers/_global';
2828
2929
export default {
3030
name: 'login',
@@ -68,7 +68,7 @@ export default {
6868
}).then((res) => {
6969
Message.success(`登录成功 - userName: ${this.loginMain.user}`);
7070
71-
createLoginAuth(res.data);
71+
Global.createLoginAuth(res.data);
7272
}).catch((res) => {
7373
console.log(res);
7474
});

‎templates/src/pages/constants/constants.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ export const IN_BROWSER = typeof window !== 'undefined';
33
* 目前在开发环境可以使用Vue Devtools 和其他
44
* true开启，false关闭。
55
*/
6-
export const DEBUG = __DEV__ || (IN_BROWSER && /github.com$/.test(window.location.origin));
6+
export const DEBUG = process.env.NODE_ENV === 'development' || (IN_BROWSER && /github.com$/.test(window.location.origin));
77
/**
88
* 开发模式结合PHP后端
99
* true开启，false关闭

‎templates/src/pages/routers/_global.js

+38-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33
*/
44
import Vue from 'vue';
55
import { Device, Storage, Cookie } from '@wya/utils';
6-
import { DEBUG, TOKEN_KEY, IN_BROWSER } from '../constants/constants';
6+
import { Vc } from '@wya/vc';
7+
import { serviceManager } from '@stores/services/utils';
8+
import { DEBUG, TOKEN_KEY, IN_BROWSER, PRE_ROUTER_URL } from '../constants/constants';
79

810
class GlobalManager {
911
constructor() {
@@ -42,6 +44,7 @@ class GlobalManager {
4244
if (IN_BROWSER) {
4345
this.GUID = location.host.split(".")[0];
4446
this.landingPath = location.pathname;
47+
this.landingRoute = `${location.pathname}${location.search}`;
4548
this.landingPage = `${location.origin}${location.pathname}${location.search}`;
4649
this.height = window.innerHeight;
4750
this.width = window.innerWidth;
@@ -60,6 +63,40 @@ class GlobalManager {
6063
return !!Storage.get(TOKEN_KEY);
6164
}
6265

66+
/**
67+
* @public
68+
* 设置登录状态, 开发模式下用的
69+
*/
70+
createLoginAuth(user, replace = true, opts = {}) {
71+
this.updateUser(user);
72+
73+
window.routesManager && window.routesManager.reset();
74+
75+
// 首页或者一开始记录的页面
76+
let path = this.landingRoute.replace(new RegExp(PRE_ROUTER_URL), '/');
77+
path = /^\/login/.test(path) ? '/' : path;
78+
79+
window.app && window.app.$router.replace(path);
80+
}
81+
82+
/**
83+
* @public
84+
* 清除登录状态
85+
*/
86+
clearLoginAuth(opts = {}) {
87+
this.clearUser();
88+
Vc.instance.clearAll();
89+
serviceManager.clear();
90+
91+
// 重置页面
92+
this.landingPage = `/`;
93+
94+
/**
95+
* 清理缓存后，跳转至login(即授权或模拟登录)
96+
*/
97+
window.app && window.app.$router.replace('/login');
98+
}
99+
63100
updateUser(override = {}, opts = {}) {
64101
this.user = {
65102
...this.user,

‎templates/src/pages/routers/hooks.js

+9-71
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,27 @@
1-
import Vue from 'vue';
2-
import { Storage, Device, URL } from '@wya/utils';
3-
import { Vc, MToast, Clipboard } from '@wya/vc';
4-
import { ajax } from '@wya/http';
5-
import { merge } from 'lodash';
6-
7-
// 业务辅助
8-
import { serviceManager } from '@stores/services/utils';
9-
import { PRE_ROUTER_URL, TOKEN_KEY } from '../constants/constants';
101
import { Global } from './_global';
112

123
class HooksManager {
13-
constructor(options = {}) {
14-
this.landingPage = `${window.location.pathname}${window.location.search}`;
15-
}
16-
17-
/**
18-
* @public
19-
* 设置登录状态, 开发模式下用的
20-
*/
21-
createLoginAuth = (user, replace = true, opts = {}) => {
22-
Global.updateUser(user);
23-
24-
window.routesManager && window.routesManager.reset();
25-
26-
// 首页或者一开始记录的页面
27-
let path = this.landingPage.replace(new RegExp(PRE_ROUTER_URL), '/');
28-
path = /^\/login/.test(path) ? '/' : path;
29-
30-
window.app && window.app.$router.replace(path);
31-
}
32-
33-
/**
34-
* @public
35-
* 清除登录状态
36-
*/
37-
clearLoginAuth = (opts = {}) => {
38-
Global.clearUser();
39-
Vc.instance.clearAll();
40-
serviceManager.clear();
41-
42-
// 重置页面
43-
this.landingPage = `/`;
44-
45-
/**
46-
* 清理缓存后，跳转至login(即授权或模拟登录)
47-
*/
48-
window.app && window.app.$router.replace('/login');
49-
}
50-
514
/**
525
* @public
536
* 默认只分为两种情况，/login页面和非/login页面
547
* allow.regex: /^\/(login)$/
558
*/
569
beforeEach = async (to, from, next) => {
10+
if (/^(\/tpl\/)/.test(to.path)) {
11+
next();
12+
return;
13+
}
14+
5715
let logged = Global.isLoggedIn();
5816

59-
/**
60-
* /login页面
61-
*/
17+
// 登录页
6218
if (to.path === '/login') {
63-
/**
64-
* 可能无限重定向, 需要设定根域名不能重定向到`/login`
65-
*/
6619
logged ? next('/') : next();
6720
return;
6821
}
6922

70-
/**
71-
* 非/login页面
72-
*/
73-
if (logged) {
74-
next();
75-
return;
76-
}
23+
// 非登录页，已登录/未登陆
24+
logged ? next() : next('/login');
7725
}
7826

7927
/**
@@ -84,15 +32,5 @@ class HooksManager {
8432
}
8533
}
8634

87-
const hooks = new HooksManager();
88-
const { beforeEach, afterEach, clearLoginAuth, createLoginAuth } = hooks;
89-
90-
export {
91-
beforeEach,
92-
afterEach,
93-
clearLoginAuth,
94-
createLoginAuth
95-
};
96-
97-
export default hooks;
35+
export default HooksManager;
9836

‎templates/src/pages/routers/router.js

+5-19
Original file line numberDiff line numberDiff line change
@@ -22,33 +22,19 @@ import request from '@extends/plugins/request';
2222
import VcConfig from './vc.config';
2323
import scrollBehavior from './scroll-behavior';
2424

25-
import { beforeEach, afterEach, clearLocalStorage } from './hooks';
26-
2725
/**
2826
* Vuex Config
2927
*/
3028
import { storeConfig } from '../stores/root';
3129

30+
import HooksManager from './hooks';
3231
import RoutesManager from './routes.dynamic';
3332

3433
export const createApp = () => {
35-
/**
36-
* vue-router Config
37-
*/
38-
let dynamicRoutes;
39-
if (process.env.NODE_ENV !== "production") {
40-
dynamicRoutes = require('./routes.dev').dynamicRoutes;
41-
} else {
42-
dynamicRoutes = require('./routes.dist').dynamicRoutes;
43-
}
44-
let basicRoutes;
45-
if (process.env.NODE_ENV !== "production") {
46-
basicRoutes = require('./routes.dev').basicRoutes;
47-
} else {
48-
basicRoutes = require('./routes.dist').basicRoutes;
49-
}
50-
51-
let routesManager = new RoutesManager(basicRoutes, dynamicRoutes);
34+
const routesManager = new RoutesManager();
35+
const hooksManager = new HooksManager();
36+
37+
const { beforeEach, afterEach } = hooksManager;
5238

5339
Vue.config.productionTip = false;
5440
Vue.config.devtools = Global.debug;

‎templates/src/pages/routers/routes.dist.js

+12-5
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
import Vue from 'vue';
22
import { PRE_ROUTER_URL } from '../constants/constants';
3-
import { tplConfig } from '../containers/__tpl__/app';
43
import { loginConfig } from '../containers/login/app';
4+
import { tplConfig } from '../containers/__tpl__/app';
55
import { settingConfig } from '../containers/setting/app';
66

7-
export const dynamicRoutes = {
8-
tpl: tplConfig,
9-
setting: settingConfig,
10-
};
7+
// 开放式路由（未登录），不支持Layout组件的管理
118
export const basicRoutes = {
129
base: PRE_ROUTER_URL,
1310
mode: 'history',
@@ -21,3 +18,13 @@ export const basicRoutes = {
2118
}
2219
]
2320
};
21+
22+
// 开放式路由（未登录），但可以共享Layout组件
23+
export const layoutRoutes = {
24+
tpl: tplConfig,
25+
};
26+
27+
// 权限路由（已登录），根据权限动态注入路由
28+
export const dynamicRoutes = {
29+
setting: settingConfig,
30+
};

‎templates/src/pages/routers/routes.dynamic.js

+41-39
Original file line numberDiff line numberDiff line change
@@ -12,9 +12,14 @@ import { getChunks } from '@components/layout/menu/chunks';
1212
import { Global } from './_global';
1313

1414
class RoutesManager {
15-
constructor(basicRoutes, dynamicRoutes) {
16-
this.basicRoutes = basicRoutes;
17-
this.dynamicRoutes = dynamicRoutes;
15+
constructor() {
16+
let { basicRoutes, layoutRoutes, dynamicRoutes } = process.env.NODE_ENV !== "production"
17+
? require('./routes.dev')
18+
: require('./routes.dist');
19+
20+
this.basicRoutes = basicRoutes || {};
21+
this.layoutRoutes = layoutRoutes || {};
22+
this.dynamicRoutes = dynamicRoutes || {};
1823

1924
this.router = null;
2025
this.config = this._init();
@@ -28,20 +33,18 @@ class RoutesManager {
2833
* 初始化路由，如果已经登录过，则生成有权限的路由配置文件，给Router
2934
*/
3035
_init() {
31-
let routes = cloneDeep(this.basicRoutes);
32-
33-
if (Global.isLoggedIn()) {
34-
let children = this.getRoutes();
35-
let redirect = (children[0] || {}).path || '/404';
36-
37-
routes.routes.push({
38-
path: '/',
39-
component: Layout,
40-
redirect,
41-
children
42-
});
43-
}
44-
return routes;
36+
let config = cloneDeep(this.basicRoutes);
37+
let children = Global.isLoggedIn() ? this.getRoutes() : this.getRoutes(this.layoutRoutes);
38+
let redirect = (children[0] || {}).path || '/404';
39+
40+
config.routes.push({
41+
path: '/',
42+
component: Layout,
43+
redirect,
44+
children
45+
});
46+
47+
return config;
4548
}
4649

4750
/**
@@ -65,19 +68,17 @@ class RoutesManager {
6568
);
6669
}
6770

68-
getRoutes() {
69-
let dynamicRoutes = cloneDeep(this.dynamicRoutes);
71+
getRoutes(targetRoutes) {
72+
targetRoutes = cloneDeep(targetRoutes || { ...this.layoutRoutes, ...this.dynamicRoutes });
73+
7074
let allRoutes = getChunks().reduce((pre, cur) => {
71-
dynamicRoutes[cur.value] && pre.push(...dynamicRoutes[cur.value]);
75+
targetRoutes[cur.value] && pre.push(...targetRoutes[cur.value]);
7276
return pre;
7377
}, []);
7478

75-
76-
let auth = Global.isLoggedIn();
77-
7879
// 筛选出有权限的路由
7980
let authRoutes = allRoutes.filter((route) => {
80-
// return auth[route.auth];
81+
// return Global.auth[route.auth];
8182
return true;
8283
});
8384

@@ -101,21 +102,7 @@ class RoutesManager {
101102
});
102103
}
103104

104-
// 普通路由
105-
let config = !route.components
106-
? route
107-
: {
108-
...route,
109-
components: {
110-
default: () => ({
111-
component: route.components[0]()
112-
}),
113-
left: route.components.includes('left') && Left,
114-
top: route.components.includes('top') && Top,
115-
}
116-
};
117-
118-
pre.push(config);
105+
pre.push(this.rebuildRoute(route));
119106
return pre;
120107
}, []);
121108

@@ -143,5 +130,20 @@ class RoutesManager {
143130

144131
return redirect;
145132
}
133+
134+
rebuildRoute(route) {
135+
return !route.components || route.redirect
136+
? route
137+
: {
138+
...route,
139+
components: {
140+
default: () => ({
141+
component: route.components[0]()
142+
}),
143+
left: route.components.includes('left') && Left,
144+
top: route.components.includes('top') && Top,
145+
}
146+
};
147+
}
146148
}
147149
export default RoutesManager;

‎templates/src/pages/routers/scroll-behavior.js

+1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ class ScrollManager {
1717
if (!IN_BROWSER) return;
1818
this._init();
1919

20+
/* global __DEV__ */
2021
__DEV__ && (window.HISTORY = this.history);
2122
}
2223

0 commit comments

Comments
 (0)