<template>
    <div id="login">
      <div id="login-form" @keyup.enter="inputInfo">
        <h1>登陆界面</h1>
        <label for="username"><i class="el-icon-user-solid" style="color: #c1c1c1"></i></label>
        <input type="text" placeholder="用户名" name="username" id="username" autocapitalize="off" v-model.trim=username aria-autocomplete="off">
        <label for="password"><i class="el-icon-right" style="color: #c1c1c1"></i></label>
        <input type="password" placeholder="密码" name="password" id="password" autocapitalize="off" v-model.trim="password">
        <div>
          <el-button type="primary" v-on:click="inputInfo">登录</el-button>
          <el-button type="info"  @click="open2" v-on:click="resetInfo">重置</el-button>
        </div>
      </div>
    </div>
  </template>
  <script>
  export default {
    name: "UserLogin",
    data () {
      return {
        username: '',
        password: '',
      }
    },
    methods: {
      inputInfo(){
        // 可通过调取接口验证账号密码，这里是本地验证不为空，跳转设置token
        if(this.username !== '' && this.password !== ''){
            localStorage.setItem('token', this.getUUid(128))
            this.$router.push({ path: '/' })
        }
    },
      resetInfo () {
        this.username = ''
        this.password = ''
      },
      open2 () {
        if (this.username != '' || this.password != '') {
          ElNotification({
            title: 'Success',
            message: '用户名和密码将被清空',
            type: 'success',
          });
          return;
        } else {
          ElNotification({
            title: 'Error',
            message: '请不要重复此操作',
            type: 'error',
          });
        }
  
      }
    }
  }
  </script>
  
  <style lang="less" scoped>
  #login {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
  }
  
  #login-form {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50vw;
    min-width: 300px;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 15px;
    box-shadow: 0 15px 25px rgba(0, 0, 0, .5);
  
    h1 {
      width: 60%;
      margin: 50px auto 20px;
      color: #c1c1c1;
      text-align: center;
    }
  
    input {
      width: 60%;
      margin: 15px auto;
      outline: none;
      border: none;
      padding: 10px;
      border-bottom: 1px solid #fff;
      background: transparent;
      color: white;
    }
  
    label {
      width: 60%;
      margin: 0 auto;
      position: relative;
      top: 30px;
      left: -15px;
    }
  
    div {
      width: 60%;
      margin: 10px auto;
      display: flex;
      justify-content: center;
      align-content: center;
    }
  
    button {
      // rgba
      background-color: rgba(9, 108, 144, 0.5);
      margin: 10px 25px 40px 25px;
    }
  
    p {
      width: 60%;
      margin: 8px auto;
      position: relative;
      left: -15px;
      color: #ff0000;
      font-size: 8px;
    }
  }
  
  input {
    -webkit-text-fill-color: #ffffff !important;
    transition: background-color 5000s ease-in-out ,width 1s ease-out!important;
  }
  </style>

登陆页面进行本地验证

gutUUid，可用作token，id等随机长字符串，设为全局函数

exports.install = function (Vue, options) {
  Vue.prototype.getUUid = function (length){
    const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()_+~`|}{[]:;?><,./-='; // Add any additional special characters you want to include
    let result = '';
    for (let i = 0; i < length; i++) {
      const randomIndex = Math.floor(Math.random() * characters.length);
      result += characters.charAt(randomIndex);
    }
    return result;
  };
};

 获取删除设置token

export function getToken() {
  return localStorage.getItem('token')||sessionStorage.getItem('token')
}
export function setToken(token,timer){
    removeToken()
    if(timer){
        sessionStorage.setItem('token',token)
    }else{
        localStorage.setItem('token',token)
    }
}
export function removeToken(){
    localStorage.removeItem('token')
    sessionStorage.removeItem('token')
}

路由守卫判断是否有token，跳转对应页面

import Vue from "vue";
import VueRouter from "vue-router";
import HomeView from "../views/HomeView.vue";
import { getToken } from "@/utils/getToken";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/login",
    name: "login",
    component: () =>
      import(/* webpackChunkName: "login" */ "@/components/login.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

router.beforeEach((to, from, next) => {
  if (to.path === "/login") {
    next();
    return;
  }
  if (!getToken()) return next("/login");
  next();
});

export default router;