modify(login): 修改登录返回对象，新增返回用户信息

frontend/web/src/components/IconInput.vue

@@ -4,7 +4,9 @@
     <div class="field-wrap">
       <i class="icon" :data-feather="props.iconName" ref="iconElement"></i> 
       
-      <input :type="props.type" v-model="inputValue" :placeholder="props.placeholder" v-bind="attrs"/>
+      <input :type="props.type" v-model="inputValue" :placeholder="props.placeholder" v-bind="attrs"
+        @input="inputHandler"
+      />
     </div>
   </div>
 </template>
@@ -76,6 +78,7 @@ const renderFeatherIcon = () => {
   }
 };
 
+
 // 1. 组件挂载后渲染图标
 onMounted(() => {
   renderFeatherIcon();

frontend/web/src/router/index.js

@@ -1,11 +1,27 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import MainView from '@/views/Main.vue'
 import TestView from '@/views/Test.vue'
+import { useAuthStore } from '@/stores/auth'
+import { useMessage } from '@/components/messages/useAlert'
+
+const message = useMessage();
 
 const routes = [
   { path: '/auth/login', component: () => import('@/views/auth/Login.vue') },
-  { path: '/', component: MainView },
-  { path: '/index', component: MainView },
+  {
+    path: '/',
+    component: MainView,
+    meta: {
+      requiresAuth: true
+    }
+  },
+  {
+    path: '/index',
+    component: MainView,
+    meta: {
+      requiresAuth: true
+    }
+  },
   { path: '/test', component: TestView },
 ]
 
@@ -14,4 +30,14 @@ const router = createRouter({
   routes,
 })
 
+router.beforeEach((to, from, next) => {
+  const authStore = useAuthStore();
+  if (to.meta.requiresAuth && !authStore.isLoggedIn) {
+    message.info('未登录，即将跳转...');
+    next('auth/login');
+  } else {
+    next();
+  }
+})
+
 export default router

frontend/web/src/stores/auth.js

@@ -0,0 +1,32 @@
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+
+export const useAuthStore = defineStore('auth', () => {
+  const token = ref(localStorage.getItem('user_token') || '');
+  const userInfo = ref(null);
+
+  //判断是否已登录
+  const isLoggedIn = computed(() => !!token.value);
+
+  /**
+   * 登录成功保存状态
+   * @param {String} newToken  用户凭证 
+   * @param {*} user      用户信息
+   */
+  function setLoginInfo(newToken, user) {
+    token.value = newToken;
+    userInfo.value = user;
+    localStorage.setItem('user_token', newToken);
+  }
+
+  /**
+   * 退出登录
+   */
+  function logout() {
+    token.value = '';
+    userInfo.value = null;
+    localStorage.removeItem('user_token');
+  }
+
+  return { token, userInfo, isLoggedIn, setLoginInfo, logout };
+})

frontend/web/src/stores/counter.js

@@ -1,12 +0,0 @@
-import { ref, computed } from 'vue'
-import { defineStore } from 'pinia'
-
-export const useCounterStore = defineStore('counter', () => {
-  const count = ref(0)
-  const doubleCount = computed(() => count.value * 2)
-  function increment() {
-    count.value++
-  }
-
-  return { count, doubleCount, increment }
-})

frontend/web/src/views/auth/Login.vue

@@ -23,9 +23,11 @@
         </div>
 
         <form @submit.prevent="handleLogin">
-          <IconInput class="input" placeholder="请输入用户名" lab="用户名 / 邮箱" type="text" icon-name="user" v-model="form.username"/>
+          <IconInput class="input"
+          placeholder="请输入用户名" lab="用户名 / 邮箱" type="text" icon-name="user" v-model="form.username"/>
 
-          <IconInput  class="input" placeholder="请输入密码" lab="密码" type="password" icon-name="user" v-model="form.password"/>
+          <IconInput  class="input"
+          placeholder="请输入密码" lab="密码" type="password" icon-name="user" v-model="form.password"/>
 
           <MyButton class="loginBtn" :loading="loading">
             登录
@@ -48,6 +50,9 @@ import { useMessage } from '@/components/messages/useAlert'
 import { authService } from '@/services/auth'
 import { useRouter } from 'vue-router'
 import feather from 'feather-icons'
+import IconInput from '@/components/IconInput.vue'
+import { required, email, maxLength, minLength, helpers } from '@vuelidate/validators'
+import useVuelidate from '@vuelidate/core'
 
 const message = useMessage()
 const router = useRouter()
@@ -58,7 +63,23 @@ const form = reactive({
   password: ''
 })
 
+const rules = {
+  username:{
+    required:helpers.withMessage('用户名不能为空', required),
+    maxLength:helpers.withMessage('用户名最大20字符', maxLength(20))
+  },
+  password:{
+    required:helpers.withMessage('密码不能为空', required),
+    maxLength:helpers.withMessage('密码最大50字符', maxLength(50))
+  }
+};
+
+const v$ = useVuelidate(rules,form);
 const handleLogin = async () => {
+  if(!(await v$.value.$validate())){
+    message.error(v$.value.$errors[0].$message)
+    return;
+  }
   try{
     loading.value = true;
   const res = await authService.login(form);