增加登录逻辑

package.json

@@ -13,6 +13,7 @@
     "crypto-js": "^4.2.0",
     "element-plus": "^2.9.10",
     "js-cookie": "^3.0.5",
+    "nprogress": "^0.2.0",
     "path": "^0.12.7",
     "pinia": "^3.0.2",
     "qs": "^6.14.0",

src/main.js

@@ -2,12 +2,15 @@ import { createApp } from 'vue'
 import './style.css'
 import App from './App.vue'
 import { router } from './router'
+import '@/router/routePermission.js'
+
 import ElementPlus from 'element-plus'
 import 'element-plus/dist/index.css'
 import * as ElementPlusIconsVue from '@element-plus/icons-vue'
 import { createPinia } from 'pinia'
 
 
+
 const app = createApp(App)
 for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
   app.component(key, component)

src/pinia/user.js

@@ -76,6 +76,56 @@ export const useUsersStore = defineStore('user', {
                 })
             })
         },
+        logout() {
+            return new Promise((resolve, reject) => {
+                logout().then((res) => {
+                    if (res.code == 1) {
+                        this.token = ''
+                        this.roles = []
+                        removeToken('TOKEN');
+                        removeToken('appCode');
+                        // resetRouter()
+                    }
+                    resolve()
+                }).catch(error => {
+                    reject(error)
+                })
+            })
+        },
+        getInfo(userInfo) {
+            return new Promise((resolve, reject) => {
+                getInfo().then(response => {
+                    if (response.code != 1) {
+                        return reject('验证失败，请重新登录！')
+                    }
+                    const { data } = response
+                    findPcMenu(this.customerId).then(res => {
+                        let menuLimits = res.data
+                        let menuLimitsObj = {}
+                        if (res.code == 1) {
+                            if (menuLimits.length > 0) {
+                                for (let item of menuLimits) {
+                                    menuLimitsObj[item.configName] = item.configName
+                                }
+                            }
+                            this.menuLimitsObj = menuLimitsObj
+                            this.roles = data
+                            resolve(data)
+                        }
+                    })
+                }).catch(error => {
+                    reject(error)
+                })
+            })
+        },
+        resetToken() {
+            return new Promise(resolve => {
+                this.token = ''
+                this.roles = []
+                removeToken()
+                resolve()
+            })
+        },
     },
 })
 

src/router/routePermission.js

+import { router } from './index.js'
+import { getToken } from  '@/utils/auth'
+import { useUsersStore } from "@/pinia/user.js";
+import NProgress from 'nprogress'
+import 'nprogress/nprogress.css' // progress bar style
+
+NProgress.configure({ showSpinner: false }) // NProgress Configuration
+const whiteList = ['/login', '/auth-redirect'] // no redirect whitelist
+router.beforeEach(async (to, from, next) => {
+  const store = useUsersStore()
+  const hasToken = getToken('TOKEN')
+  // start progress bar
+  NProgress.start()
+  if (hasToken) {
+    if (to.path.includes('/login')) {
+      if (to.path == '/login') {
+        next()
+      } else {
+        next('/login')
+      }
+      NProgress.done()
+    } else {
+      const hasRoles = store.roles && store.roles.length > 0
+      if (hasRoles) {
+        if (from.path.includes('/login') || to.path.includes('/dashboard')) {
+          next()
+        } else {
+          // 攀长特安全问题修复 未授权路由禁止跳转
+          if (store.customerId == 138) {
+            let hasPermission = false
+            store.roles.forEach((i) => {
+              let arr = to.path.split('/')
+              if (arr[arr.length - 1] === i.url) {
+                hasPermission = true
+              }
+            })
+            if (hasPermission) {
+              next()
+            } else {
+              Message.warning({
+                type: 'warning',
+                message: '没有访问权限,如果需要访问请联系管理员',
+                duration: 2000
+              });
+              router.go(-1)
+            }
+          } else {
+            next()
+          }
+        }
+      } else {
+        try {
+          // debugger
+          // get user info
+          // note: roles must be a object array! such as: ['admin'] or ,['developer','editor']
+          const roles = await store.getInfo()
+          // generate accessible routes map based on roles
+          const menuLimitsObj = await store.menuLimitsObj
+        //   const accessRoutes = await store.dispatch('permission/generateRoutes', { roles, menuLimitsObj })
+          // console.log("accessRoutes",accessRoutes)
+          // dynamically add accessible routes
+        //   router.addRoutes(accessRoutes)
+          // hack method to ensure that addRoutes is complete
+          // set the replace: true, so the navigation will not leave a history record
+          // next({ ...to, replace: true })
+          next()
+        } catch (error) {
+          console.log(error)
+          // remove token and go to login page to re-login
+          await store.resetToken()
+        //   Message.warning(error || 'Has Error')
+          next(`/login?redirect=${to.path}`)
+        }
+      }
+    }
+  } else {
+    if (whiteList.indexOf(to.path) !== -1) {
+      // in the free login whitelist, go directly
+      next()
+    } else {
+      // other pages that do not have permission to access are redirected to the login page.
+      // next(`/login?redirect=${to.path}`)
+      next(`/login`)
+      NProgress.done()
+    }
+  }
+})
+
+router.afterEach(() => {
+    // finish progress bar
+    NProgress.done()
+  })
+  
\ No newline at end of file

src/utils/tools.js

+import { enc } from "crypto-js";
+// corypto-js的base6-utf8加密
+export function encryptBase64ToUtf8(msg) {
+    return enc.Base64.stringify(enc.Utf8.parse(msg))
+}
+// corypto-js的base6-utf8解密
+export function encryptUtf8ToBase64(encoded_msg) {
+    return enc.Utf8.stringify(enc.Base64.parse(encoded_msg)).toString()
+}
\ No newline at end of file

src/views/login/index.vue

@@ -258,6 +258,7 @@ import { getToken, removeToken, setToken } from "@/utils/auth";
 import { getData, getDataFun, postData } from "@/request/method";
 import { ElMessage } from "element-plus";
 import { MD5 } from "crypto-js";
+import { encryptUtf8ToBase64, encryptBase64ToUtf8 } from "@/utils/tools.js";
 export default {
   name: "Login",
   data() {
@@ -485,7 +486,7 @@ export default {
         password: "",
         captcha: "",
         captchaKey: "",
-        rememberMe: false,
+        rememberMe: getToken("rememberMe") == 'true' ?  true : false,
       },
       dialogPhoneBind: false,
       store: null,
@@ -522,7 +523,7 @@ export default {
       account: "",
       password: "",
       captcha: "",
-      rememberMe: false,
+      rememberMe: getToken("rememberMe") == 'true' ?  true : false,
     };
   },
   mounted() {
@@ -533,6 +534,14 @@ export default {
       this.loginForm.account = "";
       this.loginForm.password = "";
     }
+    if (getToken("rememberMe") == "true") {
+      this.loginOldForm.account = encryptUtf8ToBase64(getToken("account"));
+      this.loginOldForm.password =  encryptUtf8ToBase64(getToken("remmberPWS"));
+      console.log(this.loginOldForm)
+    } else {
+      this.loginOldForm.account = "";
+      this.loginOldForm.password = "";
+    }
     this.debounceAction = this.debounce(this.handleAccountInput, 100);
   },
   destroyed() {
@@ -795,7 +804,6 @@ export default {
             "&appCode=bme-pc-service",
           true
         ).then((result) => {
-          console.log(result.data);
           if (result.code == 1 && result.data && result.data.length > 0) {
             this.phoneForm.account = this.loginForm.account;
             this.phoneForm.password = this.loginForm.password;
@@ -840,7 +848,6 @@ export default {
                   account: this.phoneForm.account,
                   iphone: this.phoneForm.iphone,
                 }).then((res) => {
-                  console.log(res.data);
                   if (res.code == 1) {
                     this.getProfile(data);
                   }
@@ -877,6 +884,7 @@ export default {
           setToken("dataBranchFactoryId", data.data.dataBranchFactoryId);
           setToken("customerId", customerId);
           setToken("userId", data.data.id);
+          setToken("userName", data.data.name);
           sessionStorage.setItem("userId", data.data.id);
           let homeFlag = await this.getPermissionData(data.data.id);
           this.store.customerId = customerId;
@@ -956,6 +964,9 @@ export default {
     handleOldLogin() {
       this.$refs.loginOldForm.validate((valid) => {
         if (valid) {
+          // 记住密码
+          setToken('account', encryptBase64ToUtf8(this.loginOldForm.account))
+          setToken('remmberPWS', encryptBase64ToUtf8(this.loginOldForm.password))
           this.oldloading = true;
           this.loginOldForm.appCode = "bme-pc-service";
           const loginOldFormOrigin = { ...this.loginOldForm };
@@ -1001,6 +1012,7 @@ export default {
           setToken("dataBranchFactoryId", data.data.dataBranchFactoryId);
           setToken("customerId", customerId);
           setToken("userId", data.data.id);
+          setToken("userName", data.data.name);
           sessionStorage.setItem("userId", data.data.id);
           let homeFlag = await this.getPermissionData(data.data.id);
           this.store.customerId = customerId;