增加登录逻辑

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/layout/index.vue

@@ -9,16 +9,17 @@
 
         <el-dropdown trigger="click">
           <div  class="user-info">
-            <img
+            <svg color="red"  data-icon-name="user-circle" data-style="line" icon_origin_id="24289" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" id="user-circle" class="icon line" width="40" height="40"><path style="fill: none; stroke: rgb(1, 135, 150); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1;" d="M12,21h0a9,9,0,0,1-9-9H3a9,9,0,0,1,9-9h0a9,9,0,0,1,9,9h0A9,9,0,0,1,12,21Zm0-6a5,5,0,0,0-5,4.5,9,9,0,0,0,9.94,0A5,5,0,0,0,12,15Zm0-8a4,4,0,1,0,4,4A4,4,0,0,0,12,7Z" id="primary"></path></svg>
+            <!-- <img
               src="data:image/png;base64,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"
               class="user-avatar"
-          />
-          <span class="user-name">用户1</span>
+            /> -->
+          <span class="user-name">{{ userName }}</span>
           </div>  
          
           <template #dropdown>
             <el-dropdown-menu>
-              <el-dropdown-item :icon="Plus">退出登录</el-dropdown-item>
+              <el-dropdown-item :icon="Plus" @click="logout">退出登录</el-dropdown-item>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
@@ -41,12 +42,15 @@ import menuCom from "./menuCom.vue";
 import { CaretBottom, Plus } from "@element-plus/icons-vue";
 import { useRoute, useRouter } from 'vue-router';
 import { watch, ref, onMounted } from 'vue';
+import { getToken } from '@/utils/auth';
+import { useUsersStore } from "@/pinia/user.js";
 
 export default {
   components: {
     menuCom,
   },
   setup() {
+    const router = useRouter();
     const route = useRoute();
     const breadcrumbList = ref([]);
     
@@ -81,8 +85,20 @@ export default {
       getBreadcrumbData();
     });
     
+    const userName = getToken('userName')
+    const store = useUsersStore();
+    async function logout() {
+      sessionStorage.setItem("permissionData", "");
+      sessionStorage.setItem("branchFactoryList", []);
+      sessionStorage.setItem("primaryTypeList", []);
+      await store.logout();
+      store.istrue = false;
+      router.push({ path: '/login' });
+    }
     return {
-      breadcrumbList
+      breadcrumbList,
+      userName,
+      logout
     };
   },
   created() {

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;