feat: 登陆失效极其重定向逻辑

README.md

@@ -56,11 +56,20 @@ npm run build:package  该指令全是将目前已有的模块分别打包
 
 当模块的链接是外部链接时，如果打包的模块在参数的首位，则打包后会自动跳转到外部链接
 
+## 登陆
+
+#### 登陆逻辑
+
+1. 对已有的模块做token失效的处理，模块分别打包后，如果token失效则跳转到登陆页面
+
+登陆页面会获取到url中的redirect，登陆成功后跳转到对应的redirect页面
+
+2. 未登录成功返回403，在service中的拦截器中判断403，则携带参数到登陆页面
+
 ## 待做
 
 1. 支持对浏览器标签的信息设置
-
-	2.   打包mac程序
+2. 打包mac程序
  	3.   用户模块
  	4.   菜单在移动端下的设置
  	5.   区域纯净模式

config/defaultSetting.ts

@@ -7,5 +7,6 @@ export default {
   docTitle: 'jjl',
   docLogo: '',
   title: '',
-  logo: ''
+  logo: '',
+  logout: '' // 登出及其403的地址
 }

src/hooks/effect.ts

@@ -1,6 +1,7 @@
 import { Emitter } from '@/enum/emitter'
 import mitt from 'mitt'
 import { setBaseUrl } from '@/service/request'
+import { useRoute } from 'vue-router'
 
 import { ref, onUnmounted, onMounted } from 'vue'
 
@@ -95,3 +96,18 @@ export const useDeviceResolution = (cb: Function) => {
     screenHeight
   }
 }
+
+/**
+ *  @description 获取当前模块信息
+ *  @example
+ *  const module = useModule()
+ *  console.log(module.name)
+ *  console.log(module.path)
+ */
+export const useModule = () => {
+  const route = useRoute()
+  return {
+    name: route.matched[0].path,
+    path: 'xxx'
+  }
+}

src/hooks/index.ts

@@ -1,4 +1,4 @@
-export { useEmitter, useScheduler, useSchedulerOnce, usePort } from './effect'
+export { useEmitter, useScheduler, useSchedulerOnce, usePort, useModule } from './effect'
 
 export { useId, useFlvUrl } from './state'
 

src/service/request.ts

@@ -1,5 +1,10 @@
 import { message } from 'ant-design-vue'
 import axios, { AxiosInstance, AxiosResponse } from 'axios'
+import defaultSetting from '../../config/defaultSetting'
+import { useModule } from '@/hooks'
+import { useRoute } from 'vue-router'
+
+console.log('defaultSetting:', defaultSetting)
 
 const instance = axios.create({
   baseURL: '',
@@ -22,6 +27,13 @@ const catchErr = (response: AxiosResponse) => {
   }
 }
 
+/**
+ * 登录失效后重定向地址
+ */
+const redirectUrl = () => {
+  window.open(defaultSetting.logout + `?redirectUrl=${useModule().path}`)
+}
+
 instance.interceptors.request.use(config => {
   return config
 }, function (error) {
@@ -30,7 +42,9 @@ instance.interceptors.request.use(config => {
 
 instance.interceptors.response.use(function (response) {
   catchErr(response)
-
+  if (response.status === 403) {
+    redirectUrl()
+  }
   return response.data
 }, error => Promise.reject(error))
 

tsconfig.json

@@ -20,7 +20,8 @@
     "paths": {
       "@/*": [
         "src/*"
-      ]
+      ],
+      "ThingsUi/*": [""]
     },
     "lib": [
       "esnext",

vue.config.js

@@ -1,6 +1,7 @@
 const { defineConfig } = require('@vue/cli-service')
 const proxy = require('./config/proxy.ts')
 const path = require('path')
+const { resolve } = require('path')
 
 module.exports = defineConfig({
   // publicPath: '',
@@ -16,6 +17,9 @@ module.exports = defineConfig({
       ]
     }
   },
+  chainWebpack: config => {
+    config.resolve.alias.set('ThingsUi', resolve(__dirname, '/'))
+  },
   css: {
     loaderOptions: {
       less: {
@@ -25,5 +29,4 @@ module.exports = defineConfig({
       }
     }
   }
-
 })