feat:新增登录

liuyonghua-cww · Oct 26, 2021 · 65cc9ed · 65cc9ed
1 parent 46bbe39
commit 65cc9ed
Show file tree

Hide file tree

Showing 3 changed files with 527 additions and 1 deletion.
diff --git a/learn-x6/src/router/index.js b/learn-x6/src/router/index.js
@@ -7,7 +7,12 @@ Vue.use(VueRouter);
 const routes = [
     {
         path: '/',
-        redirect: '/index'
+        redirect: '/login'
+    },
+    {
+        path: '/login',
+        name: 'Login',
+        component: () => import('@/views/Login/index'),
     },
     {
         path: '/',
@@ -23,10 +28,28 @@ const routes = [
     }
 ];
 
+
 const router = new VueRouter({
     mode: 'hash',
     base: process.env.BASE_URL,
     routes
 });
 
+// 路由拦截
+router.beforeEach((to, from, next) => {
+    window.scrollTo(0, 0);
+    if (JSON.parse(sessionStorage.isLogined)) {
+        // 已经登录
+        next();
+    } else {
+        if (to.path === '/login') {
+            next();
+        } else {
+            next({
+                path: '/login'
+            });
+        }
+    }
+});
+
 export default router;
diff --git a/learn-x6/src/views/Login/index.vue b/learn-x6/src/views/Login/index.vue
@@ -0,0 +1,126 @@
+<template>
+    <div class="login-container">
+        <div id="logo">
+            <h1><i> STARK INDUSTRIES</i></h1>
+        </div>
+        <section class="stark-login">
+
+            <div class="form">
+                <div id="fade-box">
+                    <input v-model="username" id="username" name="username" placeholder="Username" required type="text">
+                    <input v-model="password" placeholder="Password" required type="password">
+
+                    <button @click="login">Log In</button>
+                </div>
+            </div>
+            <div class="hexagons">
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <br>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <br>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+
+                <br>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <br>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+                <span>&#x2B22;</span>
+            </div>
+        </section>
+
+        <div id="circle1">
+            <div id="inner-cirlce1">
+                <h2></h2>
+            </div>
+        </div>
+
+
+        <ul>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+            <li></li>
+        </ul>
+
+
+    </div>
+</template>
+
+<script>
+export default {
+    name: "index",
+    data() {
+        return {
+            username: '',
+            password: ''
+        }
+    },
+    methods: {
+        login() {
+            if (this.username === 'admin' && this.password === 'admin') {
+                this.$router.push({path: '/index'});
+                sessionStorage.isLogined = JSON.stringify(true);
+            } else {
+                this.$message.error('用户名或密码错误！')
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped src="./login.less">
+
+</style>