feat:前端增加全局路由钩子

bookmark_front/src/layout/home/Top.vue

@@ -0,0 +1,18 @@
+<template>
+  <div></div>
+</template>
+
+<script>
+import { mapState } from "vuex";
+export default {
+  name: "homeTop",
+  data() {
+    return {};
+  },
+  computed: {
+    ...mapState("globalConfig", ["userInfo"]),
+  },
+};
+</script>
+
+<style lang="less" scoped></style>

bookmark_front/src/router/index.js

@@ -1,5 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
+import vuex from "../store/index.js";
+import { GLOBAL_CONFIG, SUPPORT_NO_LOGIN, TOKEN } from "@/store/modules/globalConfig";
 
 Vue.use(VueRouter);
 
@@ -17,11 +19,11 @@ const routes = [
 		path: "/public",
 		component: () => import("@/views/public/index"),
 		children: [
-			{ path: "/login", component: () => import("@/views/public/login/index") },
+			{ path: "login", component: () => import("@/views/public/login/index") },
-			{ path: "/register", component: () => import("@/views/public/register/index") },
+			{ path: "register", component: () => import("@/views/public/register/index") },
-			{ path: "/resetPassword", component: () => import("@/views/public/passwordReset/index") },
+			{ path: "resetPassword", component: () => import("@/views/public/passwordReset/index") },
-			{ path: "/oauth/github", component: () => import("@/views/public/oauth/github/index") },
+			{ path: "oauth/github", component: () => import("@/views/public/oauth/github/index") },
-			{ path: "/404", component: () => import("@/views/public/notFound/index") }
+			{ path: "404", component: () => import("@/views/public/notFound/index") },
 		]
 	},
 	{ path: "*", redirect: "/public/404" }
@@ -32,4 +34,40 @@ const router = new VueRouter({
 	routes
 });
 
+/**
+ * 在此进行登录信息判断，以及重定向到登录页面
+ */
+router.beforeEach((to, from, next) => {
+	let supportNoLogin = to.path === '/' || to.path.startsWith("/public");
+	vuex.commit(GLOBAL_CONFIG + "/" + SUPPORT_NO_LOGIN, supportNoLogin);
+	if (!supportNoLogin && !checkJwtValid()) {
+		//如不支持未登录进入，切jwt已过期，直接跳转到登录页面
+		next({
+			path: "/public/login?to=" + btoa(location.href),
+			replace: true
+		});
+	} else {
+		next();
+	}
+})
+
+/**
+ * 检查jwt是否有效
+ */
+function checkJwtValid () {
+	let token = vuex.state[GLOBAL_CONFIG][TOKEN];
+	try {
+		if (token && token.trim().length > 0) {
+			//检查token是否还有效
+			let content = window.atob(token.split(".")[1]);
+			if (content.exp > Date.now() / 1000) {
+				return true;
+			}
+		}
+	} catch (err) {
+		console.error(err);
+	}
+	return false;
+}
+
 export default router;

bookmark_front/src/store/modules/globalConfig.js

@@ -1,8 +1,10 @@
 import localforage from "localforage";
 import HttpUtil from "../../util/HttpUtil";
-const USER_INFO = "userInfo";
+export const GLOBAL_CONFIG = "globalConfig";
-const TOKEN = "token";
+export const USER_INFO = "userInfo";
-const SERVER_CONFIG = "serverConfig";
+export const TOKEN = "token";
+export const SERVER_CONFIG = "serverConfig";
+export const SUPPORT_NO_LOGIN = "supportNoLogin";
 
 /**
  * 存储全局配置
@@ -13,7 +15,7 @@ const state = {
 	 */
 	[USER_INFO]: {},
 	/**
-   * token
+	 * token,null说明未获取登录凭证
 	 */
 	[TOKEN]: null,
 	/**
@@ -24,6 +26,10 @@ const state = {
 	 * 是否移动端
 	 */
 	isPhone: false,
+	/**
+	 * 是否支持未登录进入页面
+	 */
+	[SUPPORT_NO_LOGIN]: false,
 	/**
 	 * 服务端全局配置
 	 */
@@ -34,7 +40,7 @@ const getters = {};
 
 const actions = {
 	//登陆后的，初始化数据
-  async init(context) {
+	async init (context) {
 		if (context.state.isInit) {
 			return;
 		}
@@ -53,17 +59,17 @@ const actions = {
 		context.commit("isInit", true);
 		context.commit("isPhone", /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent));
 	},
-  async refreshUserInfo({ commit }) {
+	async refreshUserInfo ({ commit }) {
 		let userInfo = await HttpUtil.get("/user/currentUserInfo");
 		await localforage.setItem(USER_INFO, userInfo);
 		commit(USER_INFO, userInfo);
 	},
-  async setToken({ commit }, token) {
+	async setToken ({ commit }, token) {
 		await localforage.setItem(TOKEN, token);
 		commit(TOKEN, token);
 	},
 	//登出清除数据
-  async clear(context) {
+	async clear (context) {
 		await localforage.removeItem("userInfo");
 		await localforage.removeItem("token");
 		context.commit(USER_INFO, null);
@@ -73,29 +79,33 @@ const actions = {
 	/**
 	 * 从服务器读取全局配置
 	 */
-  async refreshServerConfig({ commit }) {
+	async refreshServerConfig ({ commit }) {
 		commit(SERVER_CONFIG, await HttpUtil.get("/common/config/global"));
 	}
 };
 
 const mutations = {
-  userInfo(state, userInfo) {
+	userInfo (state, userInfo) {
 		state.userInfo = userInfo;
 	},
-  token(state, token) {
+	token (state, token) {
 		state.token = token;
 	},
-  isInit(state, isInit) {
+	isInit (state, isInit) {
 		state.isInit = isInit;
 	},
-  isPhone(state, status) {
+	isPhone (state, status) {
 		state.isPhone = status;
 	},
-  [SERVER_CONFIG](state, serverConfig) {
+	[SERVER_CONFIG] (state, serverConfig) {
 		state[SERVER_CONFIG] = serverConfig;
+	},
+	[SUPPORT_NO_LOGIN] (state, val) {
+		state[SUPPORT_NO_LOGIN] = val;
 	}
 };
 
+
 export default {
 	namespaced: true,
 	state,

bookmark_front/src/store/type.js

@@ -1,5 +0,0 @@
-/**
- * 测试用
- */
-export const TEST = "test";
-export const COUNT = "count";

bookmark_front/src/views/manage/index.vue

@@ -9,9 +9,9 @@
 </template>
 
 <script>
-import Content from "@/layout/main/Content.vue";
+import Content from "@/layout/manage/Content.vue";
-import Bottom from "@/layout/main/Bottom.vue";
+import Bottom from "@/layout/manage/Bottom.vue";
-import Top from "@//layout/main/Top.vue";
+import Top from "@/layout/manage/Top.vue";
 
 import httpUtil from "../../util/HttpUtil";
 export default {