refactor: ♻️ 优化登录逻辑代码
This commit is contained in:
parent
b4bf0e05de
commit
63b3adfa2c
44
README.md
44
README.md
@ -1,24 +1,68 @@
|
|||||||
# resource-manage
|
# resource-manage
|
||||||
|
|
||||||
## Project setup
|
## Project setup
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install
|
npm install
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and hot-reloads for development
|
### Compiles and hot-reloads for development
|
||||||
|
|
||||||
```
|
```
|
||||||
npm run serve
|
npm run serve
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and minifies for production
|
### Compiles and minifies for production
|
||||||
|
|
||||||
```
|
```
|
||||||
npm run build
|
npm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
### Lints and fixes files
|
### Lints and fixes files
|
||||||
|
|
||||||
```
|
```
|
||||||
npm run lint
|
npm run lint
|
||||||
```
|
```
|
||||||
|
|
||||||
### Customize configuration
|
### Customize configuration
|
||||||
|
|
||||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
|
|
||||||
|
## 部分业务逻辑
|
||||||
|
|
||||||
|
### 登录流程
|
||||||
|
|
||||||
|
```mermaid
|
||||||
|
graph TD;
|
||||||
|
A[前置路由守卫] --> B{ query.token 是否存在?}
|
||||||
|
|
||||||
|
%% TAPD 登录流程
|
||||||
|
B -->|是| C[清除本地 token]
|
||||||
|
C --> D[调用 fetchToken]
|
||||||
|
D --> E{获取 token 成功?}
|
||||||
|
E -->|是| F[保存 token 到 localStorage<br/>重定向并移除 URL token 参数]
|
||||||
|
E -->|否| G[处理登录失败]
|
||||||
|
|
||||||
|
%% 无 token 流程
|
||||||
|
B -->|否| H{检查 Vuex 和 localStorage<br/>是否有 token?}
|
||||||
|
H -->|都没有| I[显示 token 错误<br/>中断导航]
|
||||||
|
|
||||||
|
%% 恢复 token 流程
|
||||||
|
H -->|localStorage 有 Vuex 没有| J[恢复 token 到 Vuex]
|
||||||
|
J --> L
|
||||||
|
|
||||||
|
%% 加载路由流程
|
||||||
|
H -->|Vuex 有| L{检查动态路由是否为空?}
|
||||||
|
L -->|是| M[获取路由资源]
|
||||||
|
M --> N[生成动态路由]
|
||||||
|
N --> O{是否为管理员?}
|
||||||
|
O -->|是| P[添加系统设置路由]
|
||||||
|
O -->|否| Q[继续导航]
|
||||||
|
P --> Q
|
||||||
|
L -->|否| Q
|
||||||
|
|
||||||
|
%% 登录失败处理
|
||||||
|
G --> R{是否不在白名单?}
|
||||||
|
R -->|是| S[跳转到登录失败页面<br/>中断导航]
|
||||||
|
R -->|否| T[提示点击TAPD导航栏刷新<br/>中断导航]
|
||||||
|
```
|
||||||
|
|||||||
@ -3,7 +3,7 @@ import VueRouter from "vue-router";
|
|||||||
import store from "@/index/store";
|
import store from "@/index/store";
|
||||||
import { generateIndexRouter } from "./generateIndexRouter";
|
import { generateIndexRouter } from "./generateIndexRouter";
|
||||||
import systemSettings from './systemSettings'
|
import systemSettings from './systemSettings'
|
||||||
// import { accessTokenError } from "@/index/utils/errorModal";
|
import { accessTokenError } from "@/index/utils/errorModal";
|
||||||
|
|
||||||
// hack router push callback
|
// hack router push callback
|
||||||
const originalPush = VueRouter.prototype.push;
|
const originalPush = VueRouter.prototype.push;
|
||||||
@ -34,130 +34,86 @@ const router = new VueRouter({
|
|||||||
|
|
||||||
let dynamicRoutes = [];
|
let dynamicRoutes = [];
|
||||||
|
|
||||||
router.beforeEach(async(to, from, next)=>{
|
router.beforeEach(async (to, from, next) => {
|
||||||
// 1. 从tapd进来, 重定向路由参数带token
|
const { token: queryToken } = to.query;
|
||||||
// if(to.query.token){
|
const userState = store.state.user;
|
||||||
// // 1.1 先删除本地存储
|
// const storageToken = Vue.ls.get("token");
|
||||||
// Vue.ls.remove('token')
|
const storageToken = Vue.ls.get("token")||'123test'; // 离线状态测试用
|
||||||
// // 1.2 设置token
|
|
||||||
// const tmp_token = to.query.token
|
// 1. 从 TAPD 入口进来, 更新token并重定向
|
||||||
// let formData = new FormData()
|
if (queryToken) return handleTapdLogin(queryToken, to, next);
|
||||||
// formData.append("tmp_token", tmp_token)
|
|
||||||
// await store.dispatch('user/getToken', formData)
|
// 2. Vuex 和本地存储都没有 token，处理登录失败情况, 结束导航
|
||||||
// if(store.state.user.token){
|
if (!userState.token && !storageToken) return handleNoToken(next);
|
||||||
// // 1.2.1 能拿到正式token,保存token
|
|
||||||
// Vue.ls.set('token',store.state.user.token)
|
// 3. Vuex 没有 token，但 localStorage 有，恢复 token
|
||||||
// // 跳转,去掉路由参数
|
if (!userState.token && storageToken) restoreToken(storageToken);
|
||||||
// next({ path: to.path })
|
|
||||||
// }else{
|
// 4. Vuex 有 token，但还没有动态路由，获取用户资源, 生成动态路由
|
||||||
// // 1.2.2 拿不到token
|
if (userState.token && dynamicRoutes.length === 0) loadRoutes(userState.isAdmin, next);
|
||||||
// // 1.2.2.1 判断是不是因为没有添加进白名单
|
|
||||||
// if(store.state.user.loginFailed){
|
// 5. 放行
|
||||||
// next({path: '/loginFailed'})
|
next();
|
||||||
// }else{
|
});
|
||||||
// // 1.2.2.2 判断是否已弹提示
|
|
||||||
// if(!Vue.prototype.$closeModalFun){
|
/** 处理从 TAPD 入口进来的情况 */
|
||||||
// Vue.prototype.$closeModalFun = accessTokenError('获取token失败，请点击左边导航栏应用“资源管理”重试。')
|
async function handleTapdLogin(queryToken, to, next) {
|
||||||
// }
|
Vue.ls.remove("token"); // 清除本地 token
|
||||||
// next(false)
|
|
||||||
// }
|
if (await fetchToken(queryToken)) {
|
||||||
// }
|
Vue.ls.set("token", store.state.user.token);
|
||||||
// }else{
|
return next({ path: to.path, query: {} }); // 移除 URL 中的 token 参数
|
||||||
// 2. 不是从tapd进来
|
}
|
||||||
// 2.1 检查token
|
|
||||||
// if(!store.state.user.token && !store.state.user.loginFailed){
|
return handleLoginFailure(next);
|
||||||
// const token = Vue.ls.get('token')
|
}
|
||||||
// if(token){
|
|
||||||
// store.commit('user/changeToken', token)
|
/** 通过临时 token 获取正式 token */
|
||||||
// }else {
|
async function fetchToken(tmpToken) {
|
||||||
// if(!Vue.prototype.$closeModalFun){
|
const formData = new FormData();
|
||||||
// Vue.prototype.$closeModalFun = accessTokenError('获取token失败，请点击左边导航栏应用“资源管理”重试。')
|
formData.append("tmp_token", tmpToken);
|
||||||
// }
|
await store.dispatch("user/getToken", formData);
|
||||||
// // 拿不到token, 弹窗并停止
|
return Boolean(store.state.user.token);
|
||||||
// next(false)
|
}
|
||||||
// }
|
|
||||||
// }
|
/** 处理没有 token 的情况 */
|
||||||
store.commit('user/changeToken', '123456')
|
function handleNoToken(next) {
|
||||||
// 2.2 没有路由, 生成路由
|
showTokenError();
|
||||||
if ( store.state.user.token && dynamicRoutes.length === 0) {
|
next(false);
|
||||||
// 获取用户信息
|
}
|
||||||
await store.dispatch('user/getUserInfo')
|
|
||||||
store
|
/** 从 localStorage 恢复 token */
|
||||||
.dispatch("user/getRoutesResource")
|
function restoreToken(token) {
|
||||||
.then((routesResource) => {
|
store.commit("user/changeToken", token);
|
||||||
dynamicRoutes = generateIndexRouter(routesResource)
|
}
|
||||||
router.addRoutes(dynamicRoutes)
|
|
||||||
// 是管理员, 添加设置页面路由
|
/** 生成并加载动态路由 */
|
||||||
if(store.state.user.isAdmin){
|
async function loadRoutes(isAdmin, next) {
|
||||||
router.addRoutes([systemSettings]);
|
try {
|
||||||
}
|
const routesResource = await store.dispatch("user/getRoutesResource");
|
||||||
})
|
dynamicRoutes = generateIndexRouter(routesResource);
|
||||||
.catch((err) => {
|
router.addRoutes(dynamicRoutes);
|
||||||
Vue.prototype.$error("请求用户资源失败");
|
|
||||||
console.log(err)
|
if (isAdmin) {
|
||||||
next(false)
|
router.addRoutes([systemSettings]);
|
||||||
})
|
|
||||||
}
|
}
|
||||||
// 2.4 已有路由
|
} catch (err) {
|
||||||
next()
|
Vue.prototype.$error("请求用户资源失败");
|
||||||
// }
|
console.error(err);
|
||||||
|
next(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 处理登录失败情况 */
|
||||||
|
function handleLoginFailure(next) {
|
||||||
|
return store.state.user.loginFailed ? next({ path: "/loginFailed" }) : showTokenError(next);
|
||||||
|
}
|
||||||
|
|
||||||
// if(!store.state.token){
|
/** 显示 token 相关的错误提示 */
|
||||||
// // if(false){
|
function showTokenError() {
|
||||||
// const CURRENT_USER = localStorage.getItem('uid') || to.query["CURRENT-USER"];
|
if (!Vue.prototype.$closeModalFun) {
|
||||||
// // debugger
|
Vue.prototype.$closeModalFun = accessTokenError("获取 token 失败，请点击左边导航栏应用“资源管理”重试。");
|
||||||
// store.commit('saveUid', CURRENT_USER);
|
}
|
||||||
// localStorage.setItem('uid', CURRENT_USER);
|
}
|
||||||
|
|
||||||
// const token = localStorage.getItem('token');
|
|
||||||
// if(token){
|
|
||||||
// store.commit('changeToken', token);
|
|
||||||
// localStorage.removeItem('token');
|
|
||||||
// next({ path: to.path });
|
|
||||||
// }else{
|
|
||||||
// const tmp_token = to.query.token;
|
|
||||||
// if (tmp_token) {
|
|
||||||
// let formData = new FormData();
|
|
||||||
// formData.append("tmp_token", tmp_token);
|
|
||||||
// await store.dispatch('getToken', formData);
|
|
||||||
// if(store.state.token){
|
|
||||||
// // localStorage.setItem('token',store.state.token);
|
|
||||||
// next({ path: to.path });
|
|
||||||
// }else{
|
|
||||||
// if(!Vue.prototype.$closeModalFun){
|
|
||||||
// Vue.prototype.$closeModalFun = accessTokenError('获取token失败，请点击左边导航栏应用“资源管理”重试。');
|
|
||||||
// }
|
|
||||||
// next(false);
|
|
||||||
// }
|
|
||||||
// }else{
|
|
||||||
// if(!Vue.prototype.$closeModalFun){
|
|
||||||
// Vue.prototype.$closeModalFun = accessTokenError('获取临时token失败，请点击左边导航栏应用“资源管理”重试。');
|
|
||||||
// }
|
|
||||||
// next(false);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }else{
|
|
||||||
// if (dynamicRoutes.length === 0) {
|
|
||||||
// store
|
|
||||||
// .dispatch("user/getRoutesResource")
|
|
||||||
// .then((routesResource) => {
|
|
||||||
// dynamicRoutes = generateIndexRouter(routesResource);
|
|
||||||
// router.addRoutes(dynamicRoutes);
|
|
||||||
// if(store.state.isAdmin){
|
|
||||||
// router.addRoutes([systemSettings]);
|
|
||||||
// }
|
|
||||||
// next({ path: to.path, query: to.query });
|
|
||||||
// })
|
|
||||||
// .catch((err) => {
|
|
||||||
// Vue.prototype.$error("请求用户资源失败");
|
|
||||||
// console.log(err);
|
|
||||||
// next(false);
|
|
||||||
// });
|
|
||||||
// } else {
|
|
||||||
// next();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
})
|
|
||||||
|
|
||||||
export default router;
|
export default router;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user