feat: login event after request menus

frontend/src/router/index.js

@@ -1,14 +1,21 @@
 import { createRouter, createWebHistory } from 'vue-router'
-
+import { userStore } from '@/stores/user'
+import { ElMessage } from 'element-plus'
 
 const routes = [
   {
     path: '/',
-    redirect: '/login'
+    redirect: '/main'
   },
   {
     path: '/login',
+    meta: {title: '登录页'},
     component: () => import('@/views/login.vue')
+  },
+  {
+    path: '/main',
+    meta: {title: '主页'},
+    component: () => import('@/views/main.vue')
   }
 
 ]
@@ -18,4 +25,20 @@ const router = createRouter({
   routes: routes
 })
 
+// 导航守卫
+router.beforeEach((to) => {
+  // 修改页面标题
+  if(to.meta.title) {
+    document.title = to.meta.title
+  }
+
+  if (to.path !== "/login") {
+    if (userStore().token){
+      return
+    }
+    ElMessage.warning("请登录")
+    return '/login'
+  }
+})
+
 export default router

frontend/src/service/user.js

@@ -7,3 +7,17 @@ export function login(data) {
     data
   });
 }
+
+// 获取用户信息
+export function getUserInfo(uid){
+  return request({
+    url: `/user/${uid}`
+  })
+}
+
+// 获取权限信息
+export function getMenus(rid){
+  return request({
+    url: `/role/${rid}/menu`
+  })
+}

frontend/src/stores/user.js

@@ -1,23 +1,40 @@
 import { ref, computed } from 'vue'
 import { defineStore } from 'pinia'
 import { ElMessage } from 'element-plus'
-import {login} from '@/service/user'
+import {getMenus, getUserInfo, login} from '@/service/user'
+import router from '@/router'
 
 export const userStore = defineStore('user', () => {
-  const uid = ref(0)
   const token = ref("")
+  const userInfo = ref({})
+  const userMenus = ref([])
+
+  // getter
   const accessToken = computed(() => 'Bearer ' + token.value)
 
   // 非setup语法时的actions
   const loginAction = async (data) => {
+
+    // 1. 登录
     const res = await login(data)
     token.value = res.data.token
-    uid.value = res.data.id
+
+    // 2. 获取用户信息
+    const info = await getUserInfo(res.data.id)
+    userInfo.value = info.data
+
+    // 3. 获取权限信息
+    const menus = await getMenus(info.data.roles[0].id)
+    userMenus.value = menus.data
+
+    // 4. 跳转
+    router.push("/main")
+
     // 弹框提示登录成功
     ElMessage.success("登录成功.")
   }
 
-  return { uid, token, accessToken, loginAction }
+  return { token, accessToken, userInfo, userMenus, loginAction }
 }, {
     persist: true, // 解决pinia刷新时数据丢失问题
   })

frontend/src/views/main.vue

@@ -0,0 +1,44 @@
+<script setup>
+
+</script>
+
+<template>
+    <div class="main">
+        <el-container>
+      <el-aside width="200px">Aside</el-aside>
+      <el-container>
+        <el-header>Header</el-header>
+        <el-main>Main</el-main>
+        <el-footer>Footer</el-footer>
+      </el-container>
+    </el-container>
+    </div>
+</template>
+
+<style scoped>
+.main {
+    height: 100%;
+}
+.layout-container-demo .el-header {
+  position: relative;
+  background-color: var(--el-color-primary-light-7);
+  color: var(--el-text-color-primary);
+}
+.layout-container-demo .el-aside {
+  color: var(--el-text-color-primary);
+  background: var(--el-color-primary-light-8);
+}
+.layout-container-demo .el-menu {
+  border-right: none;
+}
+.layout-container-demo .el-main {
+  padding: 0;
+}
+.layout-container-demo .toolbar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  right: 20px;
+}
+</style>

frontend/src/views/setting/about.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>about</div>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/views/system/menu.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>menu</div>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/views/system/role.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>role</div>
+</template>
+
+<style scoped>
+
+</style>

frontend/src/views/system/user.vue

@@ -0,0 +1,11 @@
+<script setup>
+
+</script>
+
+<template>
+  <div>user</div>
+</template>
+
+<style scoped>
+
+</style>