用户中心动态注册路由

src/layout/index.vue

@@ -9,10 +9,12 @@
             <div class="left_title">{{ configInfo.zhTitle || siteInfo.zhTitle }}</div>
           </div>
           <div class="left_2">
-            <div class="menus" :class="[item.route_name == acitveKey ? 'menuTrue' : '']" v-for="item in menuList3" :key="item.id" @click="toActive(item)">
-              <component class="icon" :is="item.icon"></component>
-              <span class="name">{{ item.name }}</span>
-            </div>
+            <template v-for="item in menusList" :key="item.id">
+              <div v-if="checkHasComponent(item)" class="menus" :class="[item.route_name == acitveKey ? 'menuTrue' : '']" @click="toActive(item)">
+                <component class="icon" :is="item.icon"></component>
+                <span class="name">{{ item.name }}</span>
+              </div>
+            </template>
           </div>
         </div>
         <div class="right">
@@ -33,6 +35,7 @@
 </template>
 
 <script setup>
+import { get } from 'lodash-es'
 import { LoginOutlined } from '@ant-design/icons-vue'
 import { siteInfo, menuList3 } from '@/layout/site'
 // 接口
@@ -42,6 +45,7 @@ const designStore = DesignStore()
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
 const user = computed(() => userStore.user)
+const menusList = get(user, 'value.menus', [])
 // 加载中
 const loading = ref(false)
 // 路由
@@ -52,6 +56,13 @@ const acitveKey = ref(route.name)
 
 const $checkRes = inject('$checkRes')
 const configInfo = ref({})
+// 检查是否有注册到路由中,注册的显示,没注册的不显示
+const checkHasComponent = (menu) => {
+  const routes = router.getRoutes()
+  const path = get(menu, 'path')
+  const hasPath = routes.find((f) => f.path === path)
+  return hasPath
+}
 
 // 请求
 onMounted(async () => {

src/router/index.js

@@ -1,7 +1,10 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { get } from 'lodash-es'
 import { UserStore } from '@/store/user'
+import { isInCenter, hasCenterRoutes } from './modules/center'
 export const Layout = () => import('@/layout/index.vue')
 import axios from 'axios'
+import { isUndefined } from 'lodash-es'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
@@ -249,51 +252,15 @@ const router = createRouter({
       component: () => import('@/views/search/index.vue')
     },
     {
-      path: '/layout',
+      path: '/center',
       name: 'Layout',
       component: Layout,
       children: [
         {
-          path: '/center',
-          name: 'center',
-          meta: { title: '产学研用协同创新数字化平台-基本信息' },
-          component: () => import('@/views/center/basic.vue')
-        },
-        {
-          path: '/attestation',
-          name: 'attestation',
-          meta: { title: '产学研用协同创新数字化平台-认证入驻' },
-          component: () => import('@/views/center/attestation.vue')
-        },
-        {
-          path: '/notice',
-          name: 'notice',
-          meta: { title: '产学研用协同创新数字化平台-通知管理' },
-          component: () => import('@/views/center/notice.vue')
-        },
-        {
-          path: '/achievement',
-          name: 'achievement',
-          meta: { title: '产学研用协同创新数字化平台-成果管理' },
-          component: () => import('@/views/center/achievement.vue')
-        },
-        {
-          path: '/demand',
-          name: 'demand',
-          meta: { title: '产学研用协同创新数字化平台-需求管理' },
-          component: () => import('@/views/center/demand.vue')
-        },
-        {
-          path: '/collect',
-          name: 'collect',
-          meta: { title: '产学研用协同创新数字化平台-我的收藏' },
-          component: () => import('@/views/center/collect.vue')
-        },
-        {
-          path: '/match',
-          name: 'match',
-          meta: { title: '产学研用协同创新数字化平台-活动管理' },
-          component: () => import('@/views/center/match.vue')
+          path: '/info/loading',
+          name: 'center_loading',
+          meta: { title: '产学研用协同创新数字化平台-个人中心' },
+          component: () => import('@/views/center/index.vue')
         }
       ]
     },
@@ -305,9 +272,16 @@ const router = createRouter({
     }
   ]
 })
+
+const getRedirectUri = (route) => {
+  return route.path
+}
+const centerRoutePagePath = '/info/loading'
 router.beforeEach(async (to, from, next) => {
   const userStore = UserStore()
   document.title = `${to.meta.title} `
+  const routeCheck = isInCenter(to)
+  // 进入个人中心,检查是否有token,没有token直接返回login
   const token = localStorage.getItem('token')
   if (token) {
     const res = await axios.request({
@@ -319,8 +293,37 @@ router.beforeEach(async (to, from, next) => {
       }
     })
     if (res.data.errcode === 0) userStore.setUser(res.data.data)
-    next()
-  } else next()
+    if (!routeCheck) {
+      // 没有进入个人中心,直接放行
+      next()
+      return
+    }
+    //个人中心处理
+    const isReg = hasCenterRoutes(router, to)
+    // 返回结果是undefined,不需要处理,直接next
+    if (!isReg) {
+      // 返回false,是需要注册路由,跳转进入路由页面
+      const menus = userStore.menus
+      if (menus && menus.length > 0) {
+        // 已注册完路由,但是没有当前路由信息,回到基础信息
+        next({ path: '/center/basic' })
+        return
+      }
+      next({ path: centerRoutePagePath, query: { redirectPath: getRedirectUri(to) } })
+    } else {
+      let redirectPath = get(to, 'query.redirectPath')
+      if (redirectPath) next(redirectPath)
+      else next()
+      return
+    }
+  } else {
+    if (!routeCheck) {
+      // 没有进入个人中心,直接放行
+      next()
+      return
+    }
+    next('/login')
+  }
 })
 router.afterEach(() => {
   window.scrollTo(0, 0)

src/router/modules/center.js

@@ -0,0 +1,22 @@
+import { get } from 'lodash-es'
+
+/**
+ * 检查是否进入个人中心:path以/center开始或者name以center_开始
+ *  不是进入个人中心,直接跳出
+ *  是进入个人中心:
+ *    1.检查是否已经注册路由:
+ *      已注册: 跳过
+ *      未注册:
+ *        1.注册路由至一级的Layout下
+ */
+export const isInCenter = (to) => {
+  const { path } = to
+  if (!path.includes('/center')) return false
+  return true;
+}
+
+export const hasCenterRoutes = (router, to) => {
+  const routes = router.getRoutes()
+  const thisRoute = routes.find((f) => f.path === to.path)
+  return thisRoute
+}

src/router/register.js

@@ -0,0 +1,22 @@
+export const addUserRoutes = (menus, router) => {
+  const menuArr = toRaw(menus)
+  // 默认注册位置
+  const __def = 'Layout'
+  const loadComponent = import.meta.glob('../views/**/*.vue')
+  for (const m of menuArr) {
+    const { path, route_name, type, component } = m
+    const getComponent = loadComponent[`../views${component}.vue`]
+    const route = {
+      path: path,
+      name: route_name,
+      meta: {
+        title: route_name,
+        type
+      },
+      component: getComponent
+    }
+    if (getComponent) {
+      router.addRoute(__def, route)
+    }
+  }
+}

src/store/user.js

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia'
 export const UserStore = defineStore('user', () => {
   const user = ref({})
-  const menus = ref([])
+  const menus = ref()
   /**
    * 将用户信息存起来;用户信息是在路由变更时,路由前置守卫去服务进行兑换而来
    * @param {String} payload token串

src/views/center/basic.vue

@@ -62,7 +62,7 @@
 </template>
 
 <script setup>
-import { cloneDeep } from 'lodash-es'
+import { cloneDeep, get } from 'lodash-es'
 import { UserStore } from '@/store/user'
 const userStore = UserStore()
 const user = computed(() => userStore.user)
@@ -74,6 +74,7 @@ const dictDataStore = DictDataStore()
 const sectorStore = SectorStore()
 const $checkRes = inject('$checkRes')
 const form = ref({})
+console.log( document.title)
 // 表单验证
 const ruleFormRef = ref()
 const validatePhoneNumber = (rule, value, callback) => {
@@ -110,8 +111,9 @@ const search = async () => {
   if (user.value.id) {
     let res = await store.detail(user.value.id)
     if (res.errcode == '0') {
-      if (res.data.industry) res.data.industry = [res.data.industry]
-      form.value = res.data
+      const data = get(res, 'data')
+      if (!get(data, 'industry')) data.industry = []
+      form.value = data
     }
   }
 }

src/views/center/index.vue

@@ -1,301 +1,50 @@
 <template>
-  <custom-layout class="main">
-    <div class="w_1300 one">
-      <el-tabs v-model="activeName" type="card" class="tabs">
-        <el-tab-pane label="个人中心" name="first">
-          <el-col :span="24" class="one_1"> 基本信息</el-col>
-          <el-col :span="24" class="one_2">
-            <el-form label-position="top" ref="FormRef" :model="form" :rules="rules" label-width="80px" class="form">
-              <el-form-item label="账号" prop="account">
-                <el-input size="large" clearable disabled v-model="form.account" placeholder="请输入账号">
-                  <template #prefix>
-                    <el-icon>
-                      <User />
-                    </el-icon>
-                  </template>
-                </el-input>
-              </el-form-item>
-              <el-form-item label="板块选择" prop="industry">
-                <el-checkbox-group v-model="form.industry">
-                  <el-checkbox v-for="(item, index) in plateList" :key="index" :value="item.title" name="type">{{ item.title }}</el-checkbox>
-                </el-checkbox-group>
-              </el-form-item>
-              <el-form-item label="昵称" prop="nick_name">
-                <el-input size="large" clearable v-model="form.nick_name" placeholder="请输入昵称">
-                  <template #prefix>
-                    <el-icon>
-                      <Avatar />
-                    </el-icon>
-                  </template>
-                </el-input>
-              </el-form-item>
-              <el-form-item label="性别" prop="gender">
-                <el-select size="large" v-model="form.gender" width="100%" placeholder="请选择性别">
-                  <el-option v-for="(item, index) in genderList" :key="index" :label="item.label" :value="item.value" />
-                </el-select>
-              </el-form-item>
-              <el-form-item label="手机号" prop="phone">
-                <el-input size="large" clearable v-model="form.phone" placeholder="请输入手机号" :disabled="true">
-                  <template #prefix>
-                    <el-icon>
-                      <Iphone />
-                    </el-icon>
-                  </template>
-                </el-input>
-              </el-form-item>
-              <el-form-item label="电子邮箱" prop="email">
-                <el-input size="large" clearable v-model="form.email" placeholder="请填入正确的电子邮箱" :disabled="true">
-                  <template #prefix>
-                    <el-icon>
-                      <Message />
-                    </el-icon>
-                  </template>
-                </el-input>
-              </el-form-item>
-              <el-col :span="24" class="button">
-                <el-button type="primary" @click="submitForm(FormRef)">保存</el-button>
-              </el-col>
-            </el-form>
-          </el-col>
-          <el-row v-if="form.role_type != 'User'">
-            <el-col :span="24" class="one_1">
-              基本资料
-              <span>(注意：如需修改信息需要重新审核才可显示!)</span>
-            </el-col>
-            <el-col :span="24" class="one_2">
-              <expert v-if="form.role_type == 'Expert'"></expert>
-              <company v-if="form.role_type == 'Company'"></company>
-              <incubator v-if="form.role_type == 'Incubator'"></incubator>
-              <competition v-if="form.role_type == 'Competition'"></competition>
-              <investment v-if="form.role_type == 'Investment'"></investment>
-              <association v-if="form.role_type == 'Association'"></association>
-              <state v-if="form.role_type == 'State'"></state>
-              <unit v-if="form.role_type == 'Unit'"></unit>
-            </el-col>
-          </el-row>
-        </el-tab-pane>
-        <el-tab-pane label="修改密码" name="second">
-          <el-col :span="24" class="one_2">
-            <el-form label-position="top" ref="secondRule" :model="secondForm" :rules="secondRules" label-width="80px" class="form">
-              <el-form-item label="新密码" prop="password">
-                <el-input size="large" v-model="secondForm.password" type="password" show-password placeholder="请输入新密码">
-                  <template #prefix>
-                    <el-icon>
-                      <Unlock />
-                    </el-icon>
-                  </template>
-                </el-input>
-              </el-form-item>
-              <el-form-item label="确认密码" prop="refpassword">
-                <el-input size="large" v-model="secondForm.refpassword" type="password" show-password placeholder="请再次确认输入密码">
-                  <template #prefix>
-                    <el-icon>
-                      <Unlock />
-                    </el-icon>
-                  </template>
-                </el-input>
-              </el-form-item>
-              <el-col :span="24" class="button">
-                <el-button type="primary" @click="submit(secondRule)">修改密码</el-button>
-              </el-col>
-            </el-form>
-          </el-col>
-        </el-tab-pane>
-      </el-tabs>
-    </div>
-  </custom-layout>
+  <div class="w_1300 one" v-loading="true" element-loading-text="正在加载个人中心...." :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50"></div>
 </template>
 
 <script setup>
-import { cloneDeep, get } from 'lodash-es'
-// 组件
-import association from './parts/association.vue'
-import company from './parts/company.vue'
-import competition from './parts/competition.vue'
-import expert from './parts/expert.vue'
-import incubator from './parts/incubator.vue'
-import state from './parts/state.vue'
-import unit from './parts/unit.vue'
-import investment from './parts/investment.vue'
-// 接口
+import { addUserRoutes } from '@/router/register'
 import { UserStore } from '@/store/user'
+import { get } from 'lodash-es'
+import { useRouter, useRoute } from 'vue-router'
+import { onMounted } from 'vue'
 const userStore = UserStore()
 const user = computed(() => userStore.user)
+const menus = get(user, 'value.menus', [])
+userStore.setMenus(menus)
 const router = useRouter()
-import { UsersStore } from '@/store/api/user/user'
-const store = UsersStore()
-import { DictDataStore } from '@/store/api/system/dictData'
-import { RegionStore } from '@/store/api/system/region'
-import { SectorStore } from '@/store/api/platform/sector'
-import { LoginStore } from '@/store/api/login'
-const loginStore = LoginStore()
-const dictDataStore = DictDataStore()
-const regionStore = RegionStore()
-const sectorStore = SectorStore()
-const $checkRes = inject('$checkRes')
-// 加载中
-const loading = ref(false)
-const activeName = ref('first')
-const form = ref({})
-// 表单验证
-const ruleFormRef = ref()
-const FormRef = ref()
-const validatePhoneNumber = (rule, value, callback) => {
-  const reg = /^1[3-9]\d{9}$/
-  if (!value) {
-    return callback(new Error('手机号不能为空'))
-  }
-  if (!reg.test(value)) {
-    return callback(new Error('请输入正确的手机号'))
-  }
-  callback()
-}
-const validatePassword = (rule, value, callback) => {
-  if (!value) {
-    return callback(new Error('请输入确认密码'))
-  }
-  if (secondForm.value.password !== value) {
-    callback(new Error('两次输入的密码不一致'))
-  } else {
-    callback()
-  }
-}
-const rules = reactive({
-  nick_name: [{ required: true, message: '请输入昵称', trigger: 'blur' }],
-  gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
-  phone: [{ required: true, validator: validatePhoneNumber, trigger: 'blur' }],
-  email: [{ required: true, message: '请输入电子邮箱', trigger: 'blur' }],
-  account: [{ required: true, message: '请输入账号', trigger: 'blur' }],
-  industry: [{ required: true, message: '请选择板块', trigger: 'blur' }]
-})
-const secondRule = ref()
-const secondForm = ref({})
-const secondRules = reactive({
-  password: [{ required: true, message: '请输入新密码', trigger: 'blur' }],
-  refpassword: [{ required: true, validator: validatePassword, trigger: 'blur' }]
-})
-// 字典
-const typeList = ref([])
-const genderList = ref([])
-const fieldList = ref([])
-const educationList = ref([])
-const cityList = ref([])
-const isUseList = ref([])
-const patternList = ref([])
-const scaleList = ref([])
-const IndustryList = ref([])
-const cardTypeList = ref([])
-const contributionList = ref([])
-const plateList = ref([])
-// 请求
+const route = useRoute()
 onMounted(async () => {
-  loading.value = true
-  await searchOther()
-  await search()
-  loading.value = false
-})
-const search = async () => {
-  if (user.value.id) {
-    let res = await store.detail(user.value.id)
-    if (res.errcode == '0') {
-      const data = get(res, 'data')
-      if (!get(data, 'industry')) data.industry = []
-      form.value = data
-    }
-  }
-}
-const searchOther = async () => {
-  let result
-  // 性别
-  result = await dictDataStore.query({ code: 'gender', is_use: '0' })
-  if ($checkRes(result)) genderList.value = result.data
-  // 用户类型
-  result = await dictDataStore.query({ code: 'userType', is_use: '0' })
-  if ($checkRes(result)) typeList.value = result.data
-  // 专家领域
-  result = await dictDataStore.query({ code: 'field', is_use: '0' })
-  if ($checkRes(result)) fieldList.value = result.data
-  // 企业类型
-  result = await dictDataStore.query({ code: 'companyType', is_use: '0' })
-  if ($checkRes(result)) patternList.value = result.data
-  // 企业规模
-  result = await dictDataStore.query({ code: 'companyScale', is_use: '0' })
-  if ($checkRes(result)) scaleList.value = result.data
-  // 企业所属行业
-  result = await dictDataStore.query({ code: 'companyIndustry', is_use: '0' })
-  if ($checkRes(result)) IndustryList.value = result.data
-  // 学历
-  result = await dictDataStore.query({ code: 'education', is_use: '0' })
-  if ($checkRes(result)) educationList.value = result.data
-  // 证件类型
-  result = await dictDataStore.query({ code: 'cardType', is_use: '0' })
-  if ($checkRes(result)) cardTypeList.value = result.data
-  // 出资方式
-  result = await dictDataStore.query({ code: 'contribution', is_use: '0' })
-  if ($checkRes(result)) contributionList.value = result.data
-  // 是否使用
-  result = await dictDataStore.query({ code: 'isUse', is_use: '0' })
-  if ($checkRes(result)) isUseList.value = result.data
-  // 城市
-  result = await regionStore.area({ level: 'province', code: 22 })
-  if ($checkRes(result)) cityList.value = result.data
-  // 板块
-  result = await sectorStore.query({ is_use: '0' })
-  if ($checkRes(result)) plateList.value = result.data
-}
-// 保存
-const submitForm = async (formEl) => {
-  if (!formEl) return
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      const data = cloneDeep(form.value)
-      if (data.role_type) delete data.role_type
-      const res = await store.update(data)
-      if ($checkRes(res, true)) search()
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-// 修改密码
-const submit = async (formEl) => {
-  if (!formEl) return
-  await formEl.validate(async (valid, fields) => {
-    if (valid) {
-      const data = cloneDeep(secondForm.value)
-      const res = await loginStore.rp({
-        type: 'User',
-        _id: user.value.id,
-        password: data.password
+  let str
+  // 缺少目录变量:是有都没有那种,不对
+  if (!menus) str = '用户目录数据异常'
+  // 1个目录都没有,也不对,有默认设置的,需要查看下是否有默认设置
+  if (menus.length <= 0) str = '用户目录数量异常'
+  if (str) {
+    ElMessageBox.confirm(str, '用户异常', {
+      confirmButtonText: '重新登录',
+      // cancelButtonText: i18n.global.t('common.reload'),
+      type: 'error'
+    })
+      .then(() => {
+        if (nowRouteFullPath !== '/login') window.location.href = `${import.meta.env.VITE_BASE_URL}/login`
       })
-      if ($checkRes(res, true)) {
-        userStore.logOut()
-        router.push('/login')
-      }
-    } else {
-      console.log('error submit!', fields)
-    }
-  })
-}
-// provide
-provide('cloneDeep', cloneDeep)
-provide('ruleFormRef ', ruleFormRef)
-// 字典
-provide('genderList', genderList)
-provide('fieldList', fieldList)
-provide('educationList', educationList)
-provide('cityList', cityList)
-provide('isUseList', isUseList)
-provide('patternList', patternList)
-provide('scaleList', scaleList)
-provide('IndustryList', IndustryList)
-provide('cardTypeList', cardTypeList)
-provide('contributionList', contributionList)
+      .catch(() => {
+        if (nowRouteFullPath !== '/login') location.reload()
+      })
+    return
+  } else addUserRoutes(menus, router)
+  const rRoute = toRaw(route)
+  let redirectPath = get(rRoute, 'query.redirectPath')
+  if (!redirectPath) redirectPath = '/center/basic'
+  router.push(redirectPath)
+})
 </script>
 <style scoped lang="scss">
 .main {
   background-color: #f1f2f5;
   .one {
+    height: 60vh;
     margin: 10px auto;
     background-color: #fff;
     padding: 20px;