优化登录跳转规则

src/main.js

@@ -2,15 +2,13 @@ import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
-import { Button, Select, Input, InputNumber } from 'element-ui';
+import ElementUI from 'element-ui'
+import 'element-ui/lib/theme-chalk/index.css'
 import './assets/css/style_public.css'
 
 Vue.config.productionTip = false
 
-Vue.use(Button)
-Vue.use(Select)
-Vue.use(Input)
-Vue.use(InputNumber)
+Vue.use(ElementUI)
 
 new Vue({
   router,

src/pages/index/ChatPage.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="hello">
+    <el-input placeholder="请输入用户名" v-model="username" clearable>
+    </el-input>
+    <el-input
+      placeholder="请输入密码"
+      v-model="password"
+      show-password
+    ></el-input>
+    <el-button
+      class="login-button"
+      type="primary"
+      native-type="submit"
+      @click="handleLogout"
+    >
+      退出
+    </el-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "ChatPage",
+  props: {},
+  data() {
+    return {
+      username: "",
+      password: "",
+    };
+  },
+  methods: {
+    handleLogout() {
+      this.$store.commit("SET_TOKEN", '');
+      this.$store.commit("SET_USERNAME", '');
+      this.$router.push("/login");
+    },
+  },
+};
+</script>
+
+<style scoped>
+h3 {
+  margin: 40px 0 0;
+}
+ul {
+  list-style-type: none;
+  padding: 0;
+}
+li {
+  display: inline-block;
+  margin: 0 10px;
+}
+a {
+  color: #42b983;
+}
+</style>

src/pages/index/IndexPage.vue

@@ -1,38 +0,0 @@
-<template>
-  <div class="hello">
-    <el-input placeholder="请输入用户名" v-model="username" clearable> </el-input>
-    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "IndexPage",
-  props: {
-    
-  },
-  data() {
-    return {
-      username: '',
-      password: ''
-    }
-  }
-};
-</script>
-
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>

src/pages/login/LoginPage.vue

@@ -40,15 +40,29 @@ export default {
   name: "LoginPage",
   data() {
     return {
-      username: '',
-      password: ''
-    }
+      username: "",
+      password: "",
+    };
   },
   methods: {
     handleLogin() {
-      // 登录接口接入后在这里提交账号和密码。
+      // 登录接口接入后在这里提交账号和密码
+      // 这里模拟登录成功，直接跳转到聊天页面
+      if (this.username && this.password) {
+        this.$store.commit("SET_TOKEN", "mock-token");
+        this.$store.commit("SET_USERNAME", this.username);
+        this.$router.push("/chat");
+      } else {
+        this.$message.error("请输入账号和密码");
+      }
+    },
+  },
+  mounted() {
+    // 如果已经登录过，直接跳转到聊天页面
+    if (this.$store.state.token) {
+      this.$router.push("/chat");
     }
-  }
+  },
 };
 </script>
 
@@ -56,7 +70,11 @@ export default {
 .login-page {
   align-items: center;
   background: #eef5f3;
-  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(211, 235, 229, 0.75));
+  background-image: linear-gradient(
+    135deg,
+    rgba(255, 255, 255, 0.8),
+    rgba(211, 235, 229, 0.75)
+  );
   display: flex;
   justify-content: center;
   min-height: 100vh;

src/router.js

@@ -1,9 +1,10 @@
 import Vue from 'vue'
 import VueRouter from 'vue-router'
+import store from './store'
 
 import LoginPage from './pages/login/LoginPage.vue'
 import RegisterPage from './pages/login/RegisterPage.vue'
-import IndexPage from './pages/index/IndexPage.vue'
+import ChatPage from './pages/index/ChatPage.vue'
 
 Vue.use(VueRouter)
 
@@ -23,16 +24,33 @@ const routes = [
         component: RegisterPage
     },
     {
-        path: '/index',
-        name: 'index',
-        component: IndexPage
+        path: '/chat',
+        name: 'chat',
+        component: ChatPage,
+        meta: {
+            requiresAuth: true
+        }
     }
 ]
 
 const router = new VueRouter({
-    mode: 'history',
+    mode: 'history', 
     base: process.env.BASE_URL,
     routes
 })
 
+// 路由守卫，当访问需要登录的页面时，检查是否有token，如果没有则跳转到登录页
+router.beforeEach((to, from, next) => {
+    const token = store.state.token;
+    if(to.meta.requiresAuth) {
+        if(token) {
+            next()
+        } else {
+            next('/login')
+        }
+    } else {
+        next()
+    }
+})
+
 export default router

src/store/index.js

@@ -0,0 +1,22 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+const store = new Vuex.Store({
+    state: {
+        token: '',
+        username: ''
+    },
+    mutations: {
+        // 设置token和用户名
+        SET_TOKEN(state, token) {
+            state.token = token;
+        },
+        SET_USERNAME(state, username) {
+            state.username = username;
+        }
+    }
+})
+
+export default store