js路由守卫

这是路由配置  meta:{ requiresAuth: true}为状态
import Vue from 'vue'
import VueRouter from 'vue-router'
// import HomeView from '../views/HomeView.vue'
import Ditu3D from '../views/Ditu3D.vue'
import ZiDingYi from '../views/ZiDingYi.vue'
import tubiao from '../views/TuBiao.vue'
import dianji from '../views/DianJiXianShiZuoBiao.vue'
import ui from '../views/UI.vue'
import zujian from '../views/fuzujian.vue'
import login from '../views/user/login.vue'
import home from '../views/home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: 'login'
  },
  {
    path: '/login',
    name: 'login',
    component: login
  },
  {
    path:'/home',
    name:'home',
    component:home,
    meta:{ requiresAuth: true}
  },
  {
    path: '/about',
    name: 'about',
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue'),
    meta:{ requiresAuth: true}

  },
  {
    path: '/ditu',
    name: 'ditu',
    component: Ditu3D,
    meta:{ requiresAuth: true}
  },
  {
    path:'/zidingyi',
    name:'zidingyi',
    component:ZiDingYi,
    meta:{ requiresAuth: true}
  },
  {
    path:'/tubiao',
    name:'tubiao',
    component:tubiao,
    meta:{ requiresAuth: true}
  },
  {
    path:'/dianji',
    name:'dianji',
    component:dianji,
    meta:{ requiresAuth: true}
  },
  {
    path:'/ui',
    name:'ui',
    component:ui,
    meta:{ requiresAuth: true}
  },
  {
    path:'/zujian',
    name:'zujian',
    component:zujian,
    meta:{ requiresAuth: true}
  }
]

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

router.beforeEach((to, from, next) => {  // 注册全局前置守卫，判断用户登录状态
  console.log('toto',to);
  if (to.meta.requiresAuth) {  // 判断该路由是否需要登录权限

    if (localStorage.getItem('loginStatus')==='keyi') {  // 获取当前登录用户的登录状态   在本地取缓存
      next()  // 已登录，允许访问
    } else {  // 未登录，跳转到登录页
      next('/')
    }
  } else {
    next() // 不需要登录，直接访问
  }
})
export default router

登录界面需要返回一个登录状态，把这个登录状态存到缓存当中在路由守卫中来做判断。以下是简短的登陆界面的代码，

<template>
    <div class="login">
      <h1>登录</h1>
      <form>
        <div class="form-group">
          <label for="username">用户名：</label>
          <input type="text" id="username" v-model="username" required>
        </div>
        <div class="form-group">
          <label for="password">密码：</label>
          <input type="password" id="password" v-model="password" required>
        </div>
        <button type="submit" @click.prevent="login">登录</button>
      </form>
      <p v-if="errorMessage" class="error-text">{{ errorMessage }}</p>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        username: '',
        password: '',
        errorMessage: ''
      };
    },
    methods: {
      login() {
        // 进行用户和密码验证，这里为了简单就只做了一个简单的判断
        if (this.username === 'admin' && this.password === '123') {
          // 登录成功
          alert('登录成功！');
          localStorage.setItem('loginStatus','keyi')//往本地存缓存
          this.$router.push('/home')
          
        } else {
          // 登录失败，显示错误信息
          this.errorMessage = '用户名或密码错误';
          
        }
      }
    }
  };
  </script>
  <style scoped>
  .login {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
  }
  
  form {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #f5f5f5;
    padding: 25px;
    border-radius: 5px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  .form-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-bottom: 15px;
  }
  
  label {
    font-size: 16px;
    font-weight: bold;
    width: 120px;
    text-align: right;
    padding-right: 20px;
  }
  
  input[type="text"],
  input[type="password"] {
    font-size: 16px;
    padding: 10px;
    width: 250px;
    border-radius: 3px;
    border: none;
    background-color: #f9f9f9;
    box-shadow: inset 0px 2px 3px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
  }
  
  input[type="text"]:focus,
  input[type="password"]:focus {
    outline: none;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.1);
  }
  
  button[type="submit"] {
    font-size: 16px;
    font-weight: bold;
    padding: 10px 20px;
    background-color: #4CAF50;
    color: #fff;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  button[type="submit"]:hover {
    background-color: #2F8A3E;
  }
  
  .error-text {
    color: #FF5722;
    margin-top: 15px;
  }
  </style>

登录成功跳转的页面就是你想要跳转的页面比如说是首页。