添加工具类

src/assets/index.css

@@ -0,0 +1,23 @@
+/* 公共样式 */
+
+/* 样式重置 */
+html,
+body {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+
+.login,
+.register {
+  width: 100%;
+  height: 100%;
+  overflow-x: hidden;
+  position: relative;
+  background: url("./bg.png") no-repeat center;
+  background-size: cover;
+  position: relative;
+}
+

src/main.ts

@@ -4,6 +4,9 @@ import router from './router'
 import store from './store'
 import EnclosureHttp from "./api/utils/core"
 
+// 导入公共样式
+import "./assets/index.css"
+
 const app = createApp(App)
 
 // 全局注册Axios

src/router/index.ts

@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 import Home from '../views/home.vue'
+import { setToken, getToken } from "../utils/token"
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -7,14 +8,22 @@ const routes: Array<RouteRecordRaw> = [
     name: 'home',
     component: Home
   },
-  // {
-  //   path: '/about',
-  //   name: 'About',
-  //   // route level code-splitting
-  //   // this generates a separate chunk (about.[hash].js) for this route
-  //   // which is lazy-loaded when the route is visited.
-  //   component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
-  // }
+  {
+    path: '/login',
+    name: 'login',
+    // route level code-splitting
+    // this generates a separate chunk (login.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "login" */ '../views/login.vue')
+  },
+  {
+    path: '/register',
+    name: 'register',
+    // route level code-splitting
+    // this generates a separate chunk (register.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "register" */ '../views/register.vue')
+  }
 ]
 
 const router = createRouter({
@@ -22,4 +31,11 @@ const router = createRouter({
   routes
 })
 
+const whiteList = ["/login", "/register"]
+
+router.beforeEach((to, _from, next) => {
+  const token = getToken()
+  whiteList.indexOf(to.path) !== -1 || token ? next() : next("/login") // 全部重定向到登录页
+})
+
 export default router

src/utils/token.ts

@@ -0,0 +1,19 @@
+/**
+ * 处理token的工具
+ */
+
+// 存
+export function setToken(token: string): void {
+  token && sessionStorage.setItem("Token", token)
+}
+
+// 取
+export function getToken(): string {
+  let token = sessionStorage.getItem("Token") && JSON.parse(sessionStorage.getItem("Token") || "");
+  return token;
+}
+
+// 删
+export function delToken(): void {
+  sessionStorage.removeItem("Token");
+}

src/views/home.vue

@@ -1,18 +1,3 @@
 <template>
-  <div>{{ text }}</div>
-</template>
-
-<script lang="ts">
-import { ref, onMounted, nextTick } from "vue"
-export default {
-  mounted() {
-    this.$http.request("get", "/getApi")
-  },
-  setup() {
-    const text = ref("vue-ts")
-    return {
-      text,
-    }
-  },
-}
-</script>
+  <div>Home</div>
+</template>

src/views/login.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="login">{{ text }}</div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue"
+export default {
+  mounted() {
+    // @ts-ignore
+    this.$http.request("get", "/getApi")
+  },
+  setup() {
+    const text = ref("login")
+    return {
+      text,
+    }
+  },
+}
+</script>
+
+<style scoped>
+</style>

src/views/register.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="register">{{ text }}</div>
+</template>
+
+<script lang="ts">
+import { ref } from "vue"
+export default {
+  mounted() {
+    // @ts-ignore
+    this.$http.request("get", "/getApi")
+  },
+  setup() {
+    const text = ref("register")
+    return {
+      text,
+    }
+  },
+}
+</script>
+
+<style scoped>
+</style>