From d125fba2509c152cfb7daddcf9dd6434b353f985 Mon Sep 17 00:00:00 2001
From: toesbieya <1647775459@qq.com>
Date: Sat, 3 Oct 2020 22:06:24 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A4=9A=E9=A1=B5=E7=AD=BE=E4=B8=AD=E7=9A=84vi?=
=?UTF-8?q?sitedViews=E5=8F=AA=E5=AD=98=E5=82=A8=E9=83=A8=E5=88=86?=
=?UTF-8?q?=E5=AD=97=E6=AE=B5=20=E4=BB=A3=E7=A0=81=E7=AE=80=E5=8C=96=20?=
=?UTF-8?q?=E7=A7=BB=E9=99=A4path-to-regexp?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
vue/package-lock.json | 5 ----
vue/package.json | 1 -
vue/src/config/index.js | 2 +-
vue/src/layout/mixin/tagsViewPersistent.js | 13 ++-------
vue/src/layout/store/tagsView.js | 17 ++++++++----
vue/src/main.js | 8 +-----
.../{security.js => accessControl.js} | 20 +++++++-------
vue/src/router/guardian/avoidReuse.js | 8 +++++-
vue/src/router/guardian/index.js | 8 +++---
.../guardian/{setInfo.js => setTitle.js} | 0
vue/src/router/index.js | 27 ++++++++++---------
vue/src/router/util.js | 2 +-
vue/src/store/index.js | 4 +--
vue/src/store/module/app.js | 2 +-
vue/src/store/module/socket.js | 24 ++++++++---------
vue/src/store/module/user.js | 2 +-
vue/src/util/storage.js | 4 ---
vue/src/view/app/login/LoginForm.vue | 2 +-
vue/src/view/app/login/RegisterForm.vue | 6 ++---
vue/src/view/system/user/indexPage.vue | 2 +-
20 files changed, 71 insertions(+), 86 deletions(-)
rename vue/src/router/guardian/{security.js => accessControl.js} (57%)
rename vue/src/router/guardian/{setInfo.js => setTitle.js} (100%)
diff --git a/vue/package-lock.json b/vue/package-lock.json
index 6c7c2e3..9da3002 100644
--- a/vue/package-lock.json
+++ b/vue/package-lock.json
@@ -10092,11 +10092,6 @@
"integrity": "sha1-1i27VnlAXXLEc37FhgDp3c8G0kw=",
"dev": true
},
- "path-to-regexp": {
- "version": "6.1.0",
- "resolved": "https://registry.npmjs.org/path-to-regexp/-/path-to-regexp-6.1.0.tgz",
- "integrity": "sha512-h9DqehX3zZZDCEm+xbfU0ZmwCGFCAAraPJWMXJ4+v32NjZJilVg3k1TcKsRgIb8IQ/izZSaydDc1OhJCZvs2Dw=="
- },
"path-type": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/path-type/-/path-type-3.0.0.tgz",
diff --git a/vue/package.json b/vue/package.json
index f367e2d..aec9ec6 100644
--- a/vue/package.json
+++ b/vue/package.json
@@ -17,7 +17,6 @@
"normalize.css": "^8.0.1",
"nprogress": "^0.2.0",
"pako": "^1.0.11",
- "path-to-regexp": "^6.1.0",
"socket.io-client": "^2.3.0",
"vue": "^2.6.11",
"vue-count-to": "^1.0.13",
diff --git a/vue/src/config/index.js b/vue/src/config/index.js
index f77b020..fc0a809 100644
--- a/vue/src/config/index.js
+++ b/vue/src/config/index.js
@@ -8,7 +8,7 @@ module.exports = {
//项目的部署路径，始终以'/'开头，以'/'结束
contextPath,
- //页面标题、登陆注册页的标题
+ //页面标题、登录注册页的标题
title: 'BiuBiuBiu~',
//全局axios的baseUrl、devServer的路由前缀
diff --git a/vue/src/layout/mixin/tagsViewPersistent.js b/vue/src/layout/mixin/tagsViewPersistent.js
index dd42094..4c303a7 100644
--- a/vue/src/layout/mixin/tagsViewPersistent.js
+++ b/vue/src/layout/mixin/tagsViewPersistent.js
@@ -10,9 +10,7 @@ import {getTagsView, setTagsView} from "@/util/storage"
export default {
computed: {
- shouldPersistent() {
- return tagsViewGetters.persistent
- }
+ shouldPersistent: () => tagsViewGetters.persistent
},
watch: {
@@ -36,15 +34,8 @@ export default {
}
},
- methods: {
- persistentTagsView(v) {
- //只提取部分属性
- setTagsView(v.map(({name, path, fullPath, meta}) => ({name, path, fullPath, meta})))
- }
- },
-
beforeCreate() {
- this.persistentTagsView = debounce(this.persistentTagsView)
+ this.persistentTagsView = debounce(setTagsView)
},
mounted() {
diff --git a/vue/src/layout/store/tagsView.js b/vue/src/layout/store/tagsView.js
index d705056..7c00aad 100644
--- a/vue/src/layout/store/tagsView.js
+++ b/vue/src/layout/store/tagsView.js
@@ -35,23 +35,30 @@ export const mutations = bindThis({
enabled(v) {
store.enabled = v
+
//多页签停用时清除所有页面缓存
!v && this.delAllViews()
},
- addVisitedView(view) {
- if (store.visitedViews.some(v => v.path === view.path)) return
+ addVisitedView({name, path, fullPath, meta = {}}) {
+ if (store.visitedViews.some(v => v.path === path)) {
+ return
+ }
- store.visitedViews.push(view)
+ store.visitedViews.push({name, path, fullPath, meta: {...meta}})
},
addCachedView(view) {
const {noCache, iframe, usePathKey, useFullPathKey} = view.meta || {}
- if (noCache || iframe || !view.name && !usePathKey && !useFullPathKey) return
+ if (noCache || iframe || !view.name && !usePathKey && !useFullPathKey) {
+ return
+ }
const key = getRouterViewCacheKey(view)
- if (store.cachedViews.includes(key)) return
+ if (store.cachedViews.includes(key)) {
+ return
+ }
store.cachedViews.push(key)
},
diff --git a/vue/src/main.js b/vue/src/main.js
index 38aa94d..ed7cab4 100644
--- a/vue/src/main.js
+++ b/vue/src/main.js
@@ -27,10 +27,4 @@ new Vue({
})
//页面刷新时socket重连
-store.dispatch('socket/init', store.state.user).catch()
-
-window.addEventListener('unhandledrejection', event => {
- if (event.reason.stack.startsWith('Error: Redirected when going from')) {
- event.preventDefault()
- }
-})
+store.dispatch('socket/init').catch()
diff --git a/vue/src/router/guardian/security.js b/vue/src/router/guardian/accessControl.js
similarity index 57%
rename from vue/src/router/guardian/security.js
rename to vue/src/router/guardian/accessControl.js
index a2b4c88..e7d009d 100644
--- a/vue/src/router/guardian/security.js
+++ b/vue/src/router/guardian/accessControl.js
@@ -1,18 +1,17 @@
-import {pathToRegexp} from 'path-to-regexp'
import store from "@/store"
+import {isEmpty} from "@/util"
import {auth, needAuth} from "@/util/auth"
-import {isUserExist} from "@/util/storage"
-const whiteList = ['/login', '/register', '/403', '/404', '/500'].map(url => pathToRegexp(url))
+const noLoginList = ['/login', '/register', '/403', '/404', '/500']
const beforeEach = async (to, from, next) => {
- //白名单内不需要进行权限控制
- if (whiteList.some(reg => reg.test(to.path))) {
+ //放行不需要登录即可访问的路由
+ if (noLoginList.includes(to.path)) {
return next()
}
//未登录时返回登录页
- if (!isUserExist()) {
+ if (isEmpty(store.state.user.id, store.state.user.token)) {
return next({path: '/login', query: {redirect: to.fullPath}})
}
@@ -31,11 +30,12 @@ const beforeEach = async (to, from, next) => {
next('/403')
}
-//获取进行权限验证的路由地址，使用了动态路由的会用到
+//获取进行权限验证的路由地址
function getAuthorizedPath(route) {
- const {params, path, matched} = route
- const isDynamic = Object.values(params).some(v => path.includes(v))
- return isDynamic ? matched[matched.length - 1].path : path
+ const {path, matched} = route, len = matched.length
+
+ //可能会有路由使用动态路径(诸如/:id)，matched中的path是routeConfig中声明的原始路径
+ return len > 0 ? matched[len - 1].path : path
}
export default function (router) {
diff --git a/vue/src/router/guardian/avoidReuse.js b/vue/src/router/guardian/avoidReuse.js
index dd0fd67..d7c6c67 100644
--- a/vue/src/router/guardian/avoidReuse.js
+++ b/vue/src/router/guardian/avoidReuse.js
@@ -5,7 +5,7 @@ const beforeEach = (to, from, next) => {
const a = to.meta.commonModule, b = from.meta.commonModule
const isComponentReuse = !isEmpty(a) && a === b
if (isComponentReuse) {
- //这里vue-router会报redirect错误，已在main.js中忽略
+ //这里vue-router会报redirect错误，已在下方忽略
return next(`/redirect${to.fullPath}`)
}
next()
@@ -14,3 +14,9 @@ const beforeEach = (to, from, next) => {
export default function (router) {
router.beforeEach(beforeEach)
}
+
+window.addEventListener('unhandledrejection', event => {
+ if (event.reason.stack.startsWith('Error: Redirected when going from')) {
+ event.preventDefault()
+ }
+})
diff --git a/vue/src/router/guardian/index.js b/vue/src/router/guardian/index.js
index 9d9778f..b6a08e2 100644
--- a/vue/src/router/guardian/index.js
+++ b/vue/src/router/guardian/index.js
@@ -1,13 +1,13 @@
import nprogress from './nprogress'
import avoidReuse from './avoidReuse'
-import setInfo from './setInfo'
-import security from './security'
+import setTitle from './setTitle'
+import accessControl from './accessControl'
import iframe from './iframe'
export default function (router) {
nprogress(router)
avoidReuse(router)
- setInfo(router)
- security(router)
+ accessControl(router)
+ setTitle(router)
iframe(router)
}
diff --git a/vue/src/router/guardian/setInfo.js b/vue/src/router/guardian/setTitle.js
similarity index 100%
rename from vue/src/router/guardian/setInfo.js
rename to vue/src/router/guardian/setTitle.js
diff --git a/vue/src/router/index.js b/vue/src/router/index.js
index 7916b8f..df04cd9 100644
--- a/vue/src/router/index.js
+++ b/vue/src/router/index.js
@@ -1,16 +1,17 @@
-/*
-* 路由配置
-*
-* 需要鉴权的路由：!meta.noAuth
-* 左侧菜单显示：name && !meta.hidden && meta.title
-* 左侧菜单排序：能在左侧菜单中显示 && meta.sort，升序排列
-* 左侧菜单不折叠只有一个children的路由：meta.alwaysShow
-* 页头显示：meta.pageHeader !== false && (meta.title || meta.dynamicTitle)
-* tab栏显示：meta.title || meta.dynamicTitle
-* tab栏固定显示：meta.title && meta.affix
-* 页面不缓存：!name && !meta.usePathKey && !meta.useFullPathKey || meta.noCache
-* 打开iframe：meta.iframe，不会重复打开相同src的iframe
-* */
+/**
+ * 路由配置说明
+ *
+ * 不需要鉴权的路由：meta.noAuth
+ * 左侧菜单显示：name && !meta.hidden && meta.title
+ * 左侧菜单排序：能在左侧菜单中显示 && meta.sort，升序排列
+ * 左侧菜单不折叠只有一个children的路由：meta.alwaysShow
+ * 页头显示：meta.pageHeader !== false && (meta.title || meta.dynamicTitle)
+ * tab栏显示：meta.title || meta.dynamicTitle
+ * tab栏固定显示：meta.title && meta.affix
+ * 页面不缓存：!name && !meta.usePathKey && !meta.useFullPathKey || meta.noCache
+ * 打开iframe：meta.iframe，不会重复打开相同src的iframe
+ */
+
import Vue from 'vue'
import Router from 'vue-router'
import {route as routeConfig} from '@/config'
diff --git a/vue/src/router/util.js b/vue/src/router/util.js
index 24f445c..61ff01d 100644
--- a/vue/src/router/util.js
+++ b/vue/src/router/util.js
@@ -128,7 +128,7 @@ export function generateRoutes(jsonTree) {
return jsonTree
}
-//子路由继承父路由meta上的{noAuth,noCache}，优先使用子路由的值
+//子路由继承父路由meta上的{noAuth, noCache}，优先使用子路由的值
export function metaExtend(routes, parentMeta) {
const keys = ['noAuth', 'noCache']
routes.forEach(route => {
diff --git a/vue/src/store/index.js b/vue/src/store/index.js
index 366e070..3a43b85 100644
--- a/vue/src/store/index.js
+++ b/vue/src/store/index.js
@@ -15,6 +15,4 @@ const modules = modulesFiles.keys().reduce((modules, modulePath) => {
return modules
}, {})
-export default new Vuex.Store({
- modules
-})
+export default new Vuex.Store({modules})
diff --git a/vue/src/store/module/app.js b/vue/src/store/module/app.js
index dc9ec83..7920200 100644
--- a/vue/src/store/module/app.js
+++ b/vue/src/store/module/app.js
@@ -1,7 +1,7 @@
import {createMutations} from "@/store/util"
const state = {
- //登陆页背景动画
+ //登录页背景动画
loginBackgroundAnimation: 'sparkRain',
}
diff --git a/vue/src/store/module/socket.js b/vue/src/store/module/socket.js
index 03939d4..31db28d 100644
--- a/vue/src/store/module/socket.js
+++ b/vue/src/store/module/socket.js
@@ -13,21 +13,19 @@ const state = {
const mutations = createMutations(state)
const actions = {
- init(context, user) {
- if (useMock || isEmpty(user, user.id, user.token)) return
+ init(context) {
+ const {id, token} = context.rootState.user
- socket = initSocket(user)
+ if (useMock || isEmpty(id, token)) return
- defaultEventBind(socket, context)
- customEventBind(socket, context)
+ socket = initSocket({id, token})
+
+ bindDefaultEvent(socket, context)
+ bindCustomEvent(socket, context)
},
close() {
- return new Promise(resolve => {
- if (!socket) return resolve()
- socket.close()
- resolve()
- })
+ socket && socket.close()
}
}
@@ -35,7 +33,7 @@ function initSocket({id, token}) {
return new SocketIO(socketUrl, {query: {id, token}, transports: ['websocket']})
}
-function defaultEventBind(socket, {state, commit, dispatch}) {
+function bindDefaultEvent(socket, {state, commit, dispatch}) {
socket.on('connect', () => {
commit('online', true)
console.log('socket连接成功')
@@ -72,10 +70,10 @@ function defaultEventBind(socket, {state, commit, dispatch}) {
})
}
-function customEventBind(socket, {state, commit, dispatch, rootState}) {
+function bindCustomEvent(socket, {state, commit, dispatch, rootState}) {
socket.on('logout', msg => {
if (rootState.user.prepareLogout) return
- MessageBox.alert(msg || '你已被强制下线，请重新登陆', {
+ MessageBox.alert(msg || '你已被强制下线，请重新登录', {
type: 'warning',
beforeClose: (action, instance, done) => {
dispatch('user/logout', null, {root: true}).finally(done)
diff --git a/vue/src/store/module/user.js b/vue/src/store/module/user.js
index 044a02a..d753298 100644
--- a/vue/src/store/module/user.js
+++ b/vue/src/store/module/user.js
@@ -35,7 +35,7 @@ const actions = {
user.avatar = autoCompleteUrl(user.avatar)
commit('$all', user)
setUser(user)
- return dispatch('socket/init', user, {root: true})
+ return dispatch('socket/init', null, {root: true})
})
},
diff --git a/vue/src/util/storage.js b/vue/src/util/storage.js
index 54de49d..f27b3d6 100644
--- a/vue/src/util/storage.js
+++ b/vue/src/util/storage.js
@@ -59,10 +59,6 @@ const sessionUserKey = 'SESS-USER'
const localPersonalSettingsKey = 'LOCAL-PERSONAL-SETTINGS'
const sessionTagsViewKey = 'SESS-TAGS-VIEW'
-export function isUserExist() {
- return exist(sessionUserKey)
-}
-
export function getUser() {
let user = get(sessionUserKey)
if (isEmpty(user)) {
diff --git a/vue/src/view/app/login/LoginForm.vue b/vue/src/view/app/login/LoginForm.vue
index cf755ae..a1d176a 100644
--- a/vue/src/view/app/login/LoginForm.vue
+++ b/vue/src/view/app/login/LoginForm.vue
@@ -104,7 +104,7 @@ export default {
},
success() {
- elSuccess('登陆成功')
+ elSuccess('登录成功')
const redirect = this.$route.query.redirect || '/'
//由于清除消息时会造成卡顿，所以延迟0.2s跳转
window.setTimeout(() => this.$router.replace(redirect), 200)
diff --git a/vue/src/view/app/login/RegisterForm.vue b/vue/src/view/app/login/RegisterForm.vue
index 4bcc850..3429f67 100644
--- a/vue/src/view/app/login/RegisterForm.vue
+++ b/vue/src/view/app/login/RegisterForm.vue
@@ -4,7 +4,7 @@
-
+
@@ -47,7 +47,7 @@
@@ -86,7 +86,7 @@ export default {
},
rules: {
username: [
- {required: true, message: '请输入登陆名称', trigger: 'change'},
+ {required: true, message: '请输入登录名称', trigger: 'change'},
{validator: validateLoginName, trigger: 'change'}
],
nick: [
diff --git a/vue/src/view/system/user/indexPage.vue b/vue/src/view/system/user/indexPage.vue
index 36d2e4a..e9c99fc 100644
--- a/vue/src/view/system/user/indexPage.vue
+++ b/vue/src/view/system/user/indexPage.vue
@@ -50,7 +50,7 @@
@click.stop="() => previewAvatar(row.avatar)"
>
-
+