增加跳转登陆逻辑

Author: CoderMikeHe

src/App.vue

@@ -83,9 +83,7 @@ export default {
     console.log("appvue");
     console.log(this.$route.meta);
   },
-  created() {
-    console.log("🔥App");
-  }
+  created() {}
 };
 </script>
 

src/assets/js/account/account.js

@@ -1,20 +1,78 @@
 // 处理账号相关的逻辑
+// 1、处理登陆账号
+// 2、登陆登出
+// 3、重置根路由
+
+// 这里就不做多账号处理了，这里只针对单账号登陆
 /// 登录账号的key
-const MH_RAW_LOGIN = 'MHRawLogin'
+const MH_RAW_LOGIN_KEY = 'MHRawLoginKey'
+
+import router from '@/router';
+import store from '@/store/store'
+// 配置偏好设置
+import Storage from '@/assets/js/MHPreferenceSettingHelper'
 export default {
   // 获取账号
   rawLogin() {
-    return localStorage.getItem(MH_RAW_LOGIN)
+    return Storage.getItem(MH_RAW_LOGIN_KEY) || ''
   },
   // 设置账号
   setRawLogin(rawLogin) {
     // 必须的有值，否则不存储
     if (rawLogin && rawLogin.length !== 0) {
-      localStorage.setItem(MH_RAW_LOGIN, rawLogin)
+      Storage.setItem(MH_RAW_LOGIN_KEY, rawLogin)
     }
   },
   // 删除账号
   deleteRawLogin() {
-    localStorage.removeItem(MH_RAW_LOGIN)
+    Storage.removeItem(MH_RAW_LOGIN_KEY)
+  },
+
+  // 登陆
+  login(user, rawLogin) {
+    // 归档登陆账号
+    this.setRawLogin(rawLogin)
+    // 归档用户信息
+    store.commit('loginUser', user)
+    // 跳转登陆
+    router.push('/homepage')
+  },
+
+  // 登出
+  logout() {
+    // 删除登陆账号
+    this.deleteRawLogin()
+
+    // 归档用户信息
+    store.commit('logoutUser')
+    // 清除
+    router.push("/current-login");
+  },
+
+  // 更新
+  update() { },
+
+  // delete
+  delete() { },
+
+  // 重置根路由
+  resetRootRouterView() {
+    // 获取用户信息
+    let user = store.state.user
+    // 获取账号信息
+    let account = this.rawLogin()
+    console.log('------------- 🔥跳转逻辑🔥 -------------',user);
+    console.log('------------- 🔥跳转逻辑🔥 -------------',account);
+    // 跳转逻辑判断处理
+    if (Object.keys(user).length !== 0 && account.length !== 0) {
+      /// 有账号+有用户数据  已经登录，跳转到主页
+      router.push('/homepage')
+    } else if (Object.keys(user).length !== 0 && account.length === 0) {
+      /// 没有账号+有用户数据 退出登录，跳转到账号登陆页面
+      router.push('/current-login')
+    } else {
+      /// 没有账号+没有用户数据 用户初次登陆，跳转到登陆/注册界面
+      router.push('/login')
+    }
   }
 }

src/assets/js/constant/constant.js

@@ -0,0 +1,5 @@
+export default {
+  // *************  登录相关  *************
+  // 用户存储的
+  MH_USER_INFO_KEY : "MHUserInfoKey"
+}

src/assets/utils/utils.js

@@ -3,6 +3,7 @@
 // 导航栏返回按钮
 import { blackBackItem } from '../js/MHBarButtonItem'
 
+
 const utils = {
   install(Vue) {
     // 导航栏返回按钮
@@ -25,6 +26,24 @@ const utils = {
   // - [JavaScript数组去重（12种方法，史上最全）](https://segmentfault.com/a/1190000016418021)
   uniqueArray(arr) {
     return Array.from(new Set(arr))
+  },
+
+  // 🔥是否为有效电话号码
+  // - [一组匹配中国大陆手机号码的正则表达式](https://github.com/VincentSit/ChinaMobilePhoneNumberRegex)
+  validMobile(mobile) {
+    let regex = /((?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[35678]\d{2}|4(?:0\d|1[0-2]|9\d))|9[189]\d{2}|66\d{2})\d{6})+?/g
+    return regex.test(mobile)
+  },
+
+  // 🔥格式化手机号为344
+  // - [手机格式化](https://blog.csdn.net/Wangdanting123/article/details/86938915)
+  // - [格式化手机号](https://segmentfault.com/q/1010000004508861)
+  formatMobile344(mobile) {
+    let regex = /((?:\+?86)?1(?:3\d{3}|5[^4\D]\d{2}|8\d{3}|7(?:[35678]\d{2}|4(?:0\d|1[0-2]|9\d))|9[189]\d{2}|66\d{2})\d{6})+?/g
+    if (!regex.test(mobile)) {
+      return mobile
+    }
+    return (mobile + '').replace(/(^\d{3}|\d{4}\B)/g, "$1 ")
   }
 }
 

src/main.js

@@ -38,30 +38,24 @@ Vue.use(RouteTransition)
 import utils from 'assets/utils/utils'
 Vue.use(utils)
 
-// import VuePreview from 'vue-preview'
-// Vue.use(VuePreview);
-// console.log(VuePreview);
-
-
 // 配置偏好设置
-import MHPreferenceSettingHelper from './assets/js/MHPreferenceSettingHelper'
-MHPreferenceSettingHelper.initialize()
-
-// 获取用户信息
-// let user = MHPreferenceSettingHelper.getItem('491273090') || {}
-// if (Object.keys(user).length === 0) {
-//   router.replace('/current-login')
-// } else {
-//   router.replace('/mainframe')
-// }
-
-
+import Storage from '@/assets/js/MHPreferenceSettingHelper'
+// 初始化
+Storage.initialize()
+// 账号存储
+import AccountHelper from '@/assets/js/account/account'
+// 挂在实例
 new Vue({
   router,
   store,
   render: h => h(App)
 }).$mount('#app')
 
+
+// 重置根路由
+AccountHelper.resetRootRouterView()
+
+
 // {
 //   "workbench.iconTheme": "vscode-icons",
 //   "editor.fontSize": 18,

src/router.js

@@ -63,6 +63,7 @@ export default new Router({
   routes: [
     {
       path: '/',
+      name: 'Root',
       redirect: '/login'
     },
     {
@@ -134,8 +135,11 @@ export default new Router({
     },
     {
       path: '/current-login',
-      name: 'current-login',
-      component: CurrentLogin
+      name: 'CurrentLogin',
+      component: CurrentLogin => require(['./views/login/CurrentLogin.vue'], CurrentLogin),
+      meta: {
+        keepAlive: true
+      }
     },
     {
       path: '/login',
@@ -158,7 +162,7 @@ export default new Router({
       component: Register => require(['./views/login/Register.vue'], Register)
     },
     {
-      path: '/current-login/other-login',
+      path: '/other-login',
       name: 'other-login',
       component: OtherLogin => require(['./views/login/OtherLogin.vue'], OtherLogin),
       meta: {
@@ -235,7 +239,7 @@ export default new Router({
     },
     {
       path: '/profile/setting',
-      name: 'setting', // 设置
+      name: 'Setting', // 设置
       component: Setting,
       meta: {
         keepAlive: true // 此组件需要缓存

src/store/store.js

@@ -1,16 +1,18 @@
 import Vue from "vue";
 import Vuex from "vuex";
 import modules from "../modules"
-
-
-import MHPreferenceSettingHelper from '../assets/js/MHPreferenceSettingHelper'
+// 存储类
+import Storage from '../assets/js/MHPreferenceSettingHelper'
+// 常量类
+import Constant from '../assets/js/constant/constant';
 
 // 类似单利
+// PS： root store 只处理用户信息，其他的请放在 modules 中，例如：badge.js
 Vue.use(Vuex);
 
 // 获取本地缓存的用户信息
-let user = JSON.parse(MHPreferenceSettingHelper.getItem('491273090') || '{}');
-console.log('user---' + user);
+let user = JSON.parse(Storage.getItem(Constant.MH_USER_INFO_KEY) || '{}');
+console.log('🔥😴😿 ** USER ** 😴😿🔥', user);
 
 export default new Vuex.Store({
   state: {
@@ -26,13 +28,11 @@ export default new Vuex.Store({
       // 0. 对象转json字符串
       let jsonStr = JSON.stringify(user);
       // 1. 归档数据
-      MHPreferenceSettingHelper.setItem(user.qq, jsonStr);
+      Storage.setItem(Constant.MH_USER_INFO_KEY, jsonStr);
     },
     // 登出用户
     logoutUser(state) {
-      // 0 清除掉用户数据
-      MHPreferenceSettingHelper.removeItem(state.user.qq);
-      // 1 记录
+      // 只需要将 vuex 的user置位空对象即可，无需删除本地数据
       state.user = {};
     }
   },