身份跳转后台

src/api/login.js

@@ -41,19 +41,42 @@ export function getInfo() {
 // 退出方法
 export function logout() {
   return request({
-    url: '/logout',
+    url: '/enterprise/v1/account/logout',
     method: 'post'
   })
 }
 
 // 获取验证码
-export function getCodeImg() {
+export function getCodeNum(data) {
   return request({
-    url: '/captchaImage',
+    url: '/enterprise/v1/sms/captcha',
     headers: {
       isToken: false
     },
-    method: 'get',
+    method: 'post',
+    data,
     timeout: 20000
   })
 }
+// 验证码验证
+export function codeValid(data) {
+  return request({
+    url: '/enterprise/v1/sms/captcha/validate',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data,
+  })
+}
+// 忘记密码/重置密码
+export function resetPassword(data) {
+  return request({
+    url: '/enterprise/v1/account/reset/password',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data,
+  })
+}

src/components/webGetCode/index.vue

@@ -14,11 +14,23 @@
 </template>
 
 <script setup>
+import { getCodeNum } from "@/api/login";
+
+const props = defineProps({
+  mobile: String,
+});
+
 const disabled = ref(true);
 const buttonName = ref("获取验证码");
 const isDisabled = ref(false);
 const time = ref(60);
+
+const { proxy } = getCurrentInstance();
+
 function getCode() {
+  const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/;
+  if (!reg.test(props.mobile))
+    return proxy.$modal.msgError("请输入正确的手机号码");
   isDisabled.value = true;
   let interval = setInterval(function () {
     buttonName.value = time.value + "后重新发送";
@@ -30,15 +42,12 @@ function getCode() {
       clearInterval(interval);
     }
   }, 1000);
-  console.log(66666);
+  getCodeNum({ mobile: props.mobile })
-  // getCodeImg().then((res) => {
+    .then((res) => {})
-  //   captchaOnOff.value =
+    .catch(() => {
-  //     res.captchaOnOff === undefined ? true : res.captchaOnOff;
+      isDisabled.value = false;
-  //   if (captchaOnOff.value) {
+      clearInterval(interval);
-  //     codeUrl.value = "data:image/gif;base64," + res.img;
+    });
-  //     loginForm.value.mode = res.mode;
-  //   }
-  // });
 }
 </script>
 

src/components/webHead/index.vue

@@ -84,14 +84,37 @@
               关于我们
             </div>
           </li>
-          <li class="menu-item1">
+          <li class="menu-item1" style="display: flex; justify-content: center">
             <div
+              v-if="!getters.avatar"
               class="menu-item-tit"
               :class="pagePath == '/login' ? 'active' : ''"
               @click="handlePath('/login')"
             >
               登录注册
             </div>
+
+            <el-dropdown
+              v-else
+              style="margin-top: 20px"
+              class="avatar-container right-menu-item hover-effect"
+              trigger="click"
+            >
+              <div class="avatar-wrapper">
+                <img :src="getters.avatar" class="user-avatar" />
+                <i class="el-icon-caret-bottom" />
+              </div>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <router-link to="/identity/index">
+                    <el-dropdown-item>个人中心</el-dropdown-item>
+                  </router-link>
+                  <el-dropdown-item divided @click="logout">
+                    <span>退出登录</span>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
           </li>
         </ul>
       </el-col>
@@ -100,8 +123,13 @@
 </template>
 
 <script setup>
+import { ElMessageBox } from "element-plus";
 import { defineComponent, onMounted, reactive, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+
+const store = useStore();
+const getters = computed(() => store.getters);
+
 let state = reactive({});
 let pagePath = ref("");
 const route = useRoute();
@@ -114,10 +142,27 @@ watch(
 );
 pagePath.value = route.path;
 
+function handlePage() {
+  router.push("/identity/index");
+}
+
 function handlePath(path) {
   pagePath.value = path;
   router.push(path);
 }
+function logout() {
+  ElMessageBox.confirm("确定注销并退出系统吗？", "提示", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  })
+    .then(() => {
+      store.dispatch("LogOut").then(() => {
+        location.href = "/";
+      });
+    })
+    .catch(() => {});
+}
 </script>
 
 <style lang="scss">
@@ -202,3 +247,12 @@ dt {
   }
 }
 </style>
+
+<style lang="scss" scoped>
+.user-avatar {
+  cursor: pointer;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+</style>

src/permission.js

@@ -14,7 +14,6 @@ router.beforeEach((to, from, next) => {
   NProgress.start()
   // 跳过登录验证
   next();
-  return;
   if (getToken()) {
     to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
     /* has token*/
@@ -27,15 +26,16 @@ router.beforeEach((to, from, next) => {
       if (store.getters.roles.length === 0) {
         // 判断当前用户是否已拉取完user_info信息
         store.dispatch('GetInfo').then(() => {
-          store.dispatch('GenerateRoutes').then(accessRoutes => {
+          next({ ...to, replace: true })
-            // 根据roles权限生成可访问的路由表
+          // store.dispatch('GenerateRoutes').then(accessRoutes => {
-            accessRoutes.forEach(route => {
+          //   // 根据roles权限生成可访问的路由表
-              if (!isHttp(route.path)) {
+          //   accessRoutes.forEach(route => {
-                router.addRoute(route) // 动态添加可访问路由表
+          //     if (!isHttp(route.path)) {
-              }
+          //       router.addRoute(route) // 动态添加可访问路由表
-            })
+          //     }
-            next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+          //   })
-          })
+          //   next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+          // })
         }).catch(err => {
           store.dispatch('LogOut').then(() => {
             ElMessage.error(err)

src/router/index.js

@@ -194,12 +194,12 @@ export const constantRoutes = [
   {
     path: '/three',
     component: Layout,
-    redirect: '/three/expert',
+    redirect: '/three/research',
     children: [
       {
-        path: 'expert',
+        path: 'research',
         component: () => import('@/views/admin/three/index'),
-        name: 'Expert',
+        name: 'Research',
         meta: { title: '首页', icon: 'dashboard', affix: true }
       }
     ]

src/store/modules/user.js

@@ -1,4 +1,5 @@
 import { login, logout, getInfo } from '@/api/login'
+import { settled } from '@/api/identity'
 import { getToken, setToken, removeToken } from '@/utils/auth'
 import defAva from '@/assets/images/profile.jpg'
 
@@ -50,9 +51,9 @@ const user = {
     // 获取用户信息
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
-        getInfo().then(res => {
+        settled().then(res => {
-          const user = res.user
+          res.data['avatar'] = ''
-          const avatar = user.avatar == "" ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
+          const avatar = res.data.avatar == "" ? defAva : import.meta.env.VITE_APP_BASE_API + res.data.avatar;
 
           if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
             commit('SET_ROLES', res.roles)
@@ -60,7 +61,7 @@ const user = {
           } else {
             commit('SET_ROLES', ['ROLE_DEFAULT'])
           }
-          commit('SET_NAME', user.userName)
+          commit('SET_NAME', res.data.userName)
           commit('SET_AVATAR', avatar)
           resolve(res)
         }).catch(error => {

src/utils/request.js

@@ -77,6 +77,20 @@ service.interceptors.response.use(res => {
   error => {
     console.log('err' + error)
     let { message } = error;
+    if (message.includes("401")) {
+      ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', {
+        confirmButtonText: '重新登录',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }
+    ).then(() => {
+      store.dispatch('LogOut').then(() => {
+        location.href = '/login';
+      })
+    }).catch(() => {});
+    return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
+    }
+
     if (message == "Network Error") {
       message = "后端接口连接异常";
     }

src/views/identity/components/ExpertForm/index.vue

@@ -163,7 +163,7 @@
 
     <el-row>
       <el-col :span="24">
-        <el-form-item label="个人简介" prop="introduce">
+        <el-form-item label="个人简介:" prop="introduce">
           <el-input
             v-model="modelValue.introduce"
             type="textarea"

src/views/identity/components/FieldOptions/index.vue

@@ -53,7 +53,7 @@
                   v-for="item in levelIII"
                   :key="item.id"
                   :label="item.name"
-                  :value="item.id"
+                  :value="item"
                 >
                 </el-option>
               </el-select>

src/views/login.vue

@@ -3,11 +3,11 @@
     <div class="content">
       <img class="loginImg" src="../assets/images/login.png" alt="" srcset="" />
       <div class="login-form">
-        <el-tabs v-model="loginForm.mode" v-if="isLogin">
+        <el-tabs v-model="loginForm.mode" v-if="isLogin == 1">
           <el-tab-pane label="账号密码登录" name="102"></el-tab-pane>
           <el-tab-pane label="手机快捷登录" name="101"></el-tab-pane>
         </el-tabs>
-        <div v-if="isLogin">
+        <div v-if="isLogin == 1">
           <el-form ref="loginRef" :model="loginForm" :rules="loginRules">
             <el-form-item prop="username">
               <el-input
@@ -55,7 +55,7 @@
                   />
                 </template>
               </el-input>
-              <webGetCode />
+              <WebGetCode v-model:mobile="loginForm.username" />
             </el-form-item>
             <el-form-item>
               <el-checkbox v-model="loginForm.rememberMe">记住账号</el-checkbox>
@@ -75,21 +75,20 @@
             </el-form-item>
           </el-form>
           <div style="overflow: hidden">
-            <div style="float: left" v-if="isLogin">
+            <div style="float: left" v-if="isLogin == 1">
-              <span class="text_col pointer" :to="'/login'">忘记密码</span>
+              <span class="text_col pointer" :to="'/login'" @click="isLogin = 3"
+                >忘记密码</span
+              >
             </div>
             <div style="float: right" v-if="register">
-              <span
+              <span @click="isLogin = 2" style="color: #0054ff" class="pointer"
-                @click="isLogin = false"
-                style="color: #0054ff"
-                class="pointer"
                 >注册</span
               >
             </div>
           </div>
 
           <el-form
-            v-if="isLogin"
+            v-if="isLogin == 1"
             :model="registerForm"
             status-icon
             :rules="isCheckRules"
@@ -97,7 +96,14 @@
           >
             <el-form-item prop="isCheck">
               <div style="margin-top: 43px">
-                <div class="text_col">其他登录方式</div>
+                <div class="text_col">
+                  <div>其他登录方式</div>
+                  <img
+                    class="pointer"
+                    src="@/assets/images/weixin.png"
+                    alt=""
+                  />
+                </div>
                 <el-checkbox
                   v-model="registerForm.isCheck"
                   style="margin-top: 43px"
@@ -109,7 +115,8 @@
             </el-form-item>
           </el-form>
         </div>
-        <Register v-model:isLogin="isLogin" v-else />
+        <Register v-model:isLogin="isLogin" v-else-if="isLogin == 2" />
+        <Retrieve v-model:isLogin="isLogin" v-else-if="isLogin == 3" />
       </div>
     </div>
 
@@ -122,13 +129,14 @@
 import Cookies from "js-cookie";
 import { encrypt, decrypt } from "@/utils/jsencrypt";
 import Register from "./register.vue";
-import webGetCode from "@/components/webGetCode";
+import Retrieve from "./retrieve.vue";
+import WebGetCode from "@/components/webGetCode";
 
 const store = useStore();
 const router = useRouter();
 const { proxy } = getCurrentInstance();
 
-const isLogin = ref(true);
+const isLogin = ref(1);
 
 const loginForm = ref({
   username: "",
@@ -257,7 +265,7 @@ getCookie();
 
 .login-form {
   width: 516px;
-  min-height: 517px;
+  // height: 517px;
   background: #ffffff;
   box-sizing: border-box;
   padding: 30px 33px;
@@ -327,5 +335,9 @@ getCookie();
 }
 .text_col {
   color: #999999;
+  img {
+    width: 30px;
+    margin: 10px 0 0 10px;
+  }
 }
 </style>

src/views/register.vue

@@ -56,7 +56,7 @@
           ><svg-icon icon-class="validCode" class="el-input__icon input-icon"
         /></template>
       </el-input>
-      <webGetCode />
+      <webGetCode v-model:mobile="registerForm.mobile" />
     </el-form-item>
     <el-form-item prop="isCheck" style="margin: 10px 0; height: 28px">
       <el-checkbox v-model="registerForm.isCheck">
@@ -90,17 +90,17 @@
 
 <script setup>
 import { ElMessageBox } from "element-plus";
-import { getCodeImg, register } from "@/api/login";
+import { getCodeNum, register } from "@/api/login";
 import webGetCode from "@/components/webGetCode";
 
 const props = defineProps({
-  isLogin: Boolean,
+  isLogin: Number,
 });
 
 const emit = defineEmits();
 
 function handleLogin() {
-  emit("update:isLogin", true);
+  emit("update:isLogin", 1);
 }
 
 const router = useRouter();

src/views/retrieve.vue

@@ -0,0 +1,266 @@
+<template>
+  <div>
+    <el-form
+      v-if="step == 1"
+      ref="mobileRef"
+      :model="retrieveForm"
+      :rules="mobileRules"
+      class="retrieve-form"
+    >
+      <h3 class="title">
+        <el-icon
+          class="pointer"
+          :size="18"
+          color="#333333"
+          @click="handleLogin"
+        >
+          <Back />
+        </el-icon>
+        <span>找回密码</span>
+      </h3>
+      <el-form-item prop="mobile">
+        <el-input
+          v-model="retrieveForm.mobile"
+          type="text"
+          auto-complete="off"
+          placeholder="手机号"
+        >
+          <template #prefix
+            ><svg-icon icon-class="user" class="el-input__icon input-icon"
+          /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="captcha" style="margin-bottom: 0">
+        <el-input
+          v-model="retrieveForm.captcha"
+          auto-complete="off"
+          placeholder="验证码"
+          style="width: 65%"
+        >
+          <template #prefix
+            ><svg-icon icon-class="validCode" class="el-input__icon input-icon"
+          /></template>
+        </el-input>
+        <WebGetCode v-model:mobile="retrieveForm.mobile" />
+        <!-- @isSuccess="isSuccess" -->
+      </el-form-item>
+      <el-form-item style="width: 100%; margin-top: 35px">
+        <el-button
+          class="x_btns"
+          size="medium"
+          type="primary"
+          style="width: 100%"
+          @click.prevent="handleNext"
+        >
+          <span>下一步</span>
+        </el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-form
+      v-else
+      ref="passRef"
+      :model="retrieveForm"
+      :rules="passRules"
+      class="retrieve-form"
+    >
+      <h3 class="title">
+        <el-icon class="pointer" :size="18" color="#333333" @click="step--">
+          <Back />
+        </el-icon>
+        <span>找回密码</span>
+      </h3>
+      <el-form-item prop="password">
+        <el-input
+          v-model="retrieveForm.password"
+          type="password"
+          auto-complete="off"
+          placeholder="请输入新密码"
+        >
+          <template #prefix
+            ><svg-icon icon-class="password" class="el-input__icon input-icon"
+          /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item prop="repeat_pass">
+        <el-input
+          v-model="retrieveForm.repeat_pass"
+          type="password"
+          auto-complete="off"
+          placeholder="确认密码"
+        >
+          <template #prefix
+            ><svg-icon icon-class="password" class="el-input__icon input-icon"
+          /></template>
+        </el-input>
+      </el-form-item>
+      <el-form-item style="width: 100%; margin-top: 35px">
+        <el-button
+          class="x_btns"
+          size="medium"
+          type="primary"
+          style="width: 100%"
+          @click.prevent="handleRetrieve"
+        >
+          <span>完 成</span>
+        </el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script setup>
+import { ElMessageBox } from "element-plus";
+import { getCodeNum, codeValid, resetPassword } from "@/api/login";
+import WebGetCode from "@/components/webGetCode";
+
+const props = defineProps({
+  isLogin: Number,
+});
+
+const emit = defineEmits();
+
+function handleLogin() {
+  emit("update:isLogin", 1);
+}
+
+const router = useRouter();
+const { proxy } = getCurrentInstance();
+
+const retrieveForm = ref({
+  mobile: "",
+  password: "",
+  repeat_pass: "",
+  captcha: "",
+  token: "",
+});
+
+const equalToPassword = (rule, value, callback) => {
+  if (retrieveForm.value.password !== value) {
+    callback(new Error("两次输入的密码不一致"));
+  } else {
+    callback();
+  }
+};
+
+const mobileRules = {
+  mobile: [
+    { required: true, message: "手机号不能为空", trigger: "blur" },
+    {
+      pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+      message: "请输入正确的手机号码",
+      trigger: "blur",
+    },
+  ],
+  captcha: [{ required: true, trigger: "change", message: "请输入验证码" }],
+};
+const passRules = {
+  password: [
+    { required: true, trigger: "blur", message: "请输入您的密码" },
+    {
+      min: 5,
+      max: 20,
+      message: "用户密码长度必须介于 5 和 20 之间",
+      trigger: "blur",
+    },
+  ],
+  repeat_pass: [
+    { required: true, trigger: "blur", message: "请再次输入您的新密码" },
+    { required: true, validator: equalToPassword, trigger: "blur" },
+  ],
+};
+
+const step = ref(1);
+
+function handleNext() {
+  proxy.$refs.mobileRef.validate((valid) => {
+    if (valid) {
+      codeValid(retrieveForm.value).then((res) => {
+        if (res.code == 200) {
+          retrieveForm.value.token = res.data.token;
+          step.value = 2;
+        }
+      });
+    }
+  });
+}
+
+function handleRetrieve() {
+  proxy.$refs.passRef.validate((valid) => {
+    if (valid) {
+      let formData = Object.assign({}, retrieveForm.value);
+      formData.password = proxy.md5(formData.password);
+      formData.repeat_pass = proxy.md5(formData.repeat_pass);
+      resetPassword(formData)
+        .then((res) => {
+          const mobile = formData.mobile;
+          ElMessageBox.alert(
+            "<font color='red'>恭喜你，您的账号 " +
+              mobile +
+              " 修改密码成功！</font>",
+            "系统提示",
+            {
+              dangerouslyUseHTMLString: true,
+              type: "success",
+            }
+          )
+            .then(() => {
+              handleLogin();
+              // router.push("/login");
+            })
+            .catch(() => {});
+        })
+        .catch(() => {});
+    }
+  });
+}
+</script>
+
+<style lang='scss' scoped>
+.title {
+  display: flex;
+  align-items: center;
+  margin: 0px auto 40px auto;
+  color: #333333;
+  font-size: 20px;
+  font-weight: bold;
+  .el-icon {
+    text-align: left;
+  }
+  span {
+    flex: 1;
+    text-align: center;
+  }
+}
+
+.retrieve-form {
+  .el-input {
+    height: 38px;
+    input {
+      height: 38px;
+    }
+  }
+  .input-icon {
+    height: 39px;
+    width: 14px;
+    margin-left: 2px;
+  }
+}
+.register-tip {
+  font-size: 13px;
+  text-align: center;
+  color: #bfbfbf;
+}
+.el-register-footer {
+  height: 40px;
+  line-height: 40px;
+  position: fixed;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  color: #fff;
+  font-family: Arial;
+  font-size: 12px;
+  letter-spacing: 1px;
+}
+</style>