vue路由安全守卫的使用（全局守卫）

路由的安全守卫：在路由跳转之前或者跳转之后做一些处理。

1.全局守卫

beforeEach 在路由跳转之前
afterEach 在路由跳转之后

• 简单的登录退出页面 路由全局安全守卫举例
  主要是在router.js路由节点文件和login.vue登录文件里进行一系列的操作。
  index.js 配置路由

// 配置的路由节点
import Home from '../views/Home'
import Login from '../components/login'
export default[
  {
    
    
    //Home界面路由 
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    
    
    //登录界面路由
    path: '/login',
    name: 'Login',
    component:Login,
  }
]

在main.js上全局挂载

import {
    
     createApp } from 'vue'
import App from './App.vue'
import router from './router/router'
const app=createApp(App);
app.use(router);
app.mount('#app');

router.js 配置路由

//配置整个路由
import {
    
     createRouter, createWebHistory } from 'vue-router'
import routes from '../router/index'
const router = createRouter({
    
    
    history: createWebHistory(),
    routes
  })
export default router
let islogin=false;
//路由跳转之前
router.beforeEach((to,from,next)=>{
    
    
  //return false;
  //返回值false  终止路由继续
  
  //return true;
  //true继续路由
  
  islogin=localStorage.getItem("login");//获取true或者false的值 看是否有缓存 登录是成功
  if(!Boolean(islogin)&&to.name!='Login') //获得布尔类型 Boolean
  //通过islogin看是否登陆上  如果没有缓存就是没有登陆上 并且去的路由不是登录界面的路由
  //就进行进入登录的界面
  {
    
    
   //next 可以实现路由选择跳转
    next({
    
    path:'/login'});
  }
  else{
    
    
  //否则就继续执行
    next();
  }
});

//路由跳转之后  守卫
router.afterEach((to,from)=>{
    
    
 console.log(to,from);
});
  

一个主页面，两个子页面
主页面 App.vue

<template>
  <div id="app">
  //路由接口
   <router-view></router-view>
  </div>    
</template>
<script>
export default {
    
    
   name:'app',
  }
</script>

Home.vue 主界面

<template>
  <div id="home">
      home页面
  </div>
</template>
<script>
export default {
    
    
   name:'home',
}
</script>
<style>
</style>

login.vue 登录界面

<template>
<div id="login">
    登录界面
    <br>
    <input type="text" v-model="id">
    <br>
    <input type="text" v-model="pass">
    <br>
    <button @click="userLogin">用户登录</button>
</div>
</template>
<script>
export default {
    
    
    name:"login",
    data(){
    
    
        return{
    
    
            id:'',
            pass:''
        }
    },
    methods: {
    
    
        userLogin(){
    
    
            //如果id名为admin并且传入的密码为123登录成功
            if(this.id=="admin"&&this.pass=="123")
            {
    
    
                //把用户的登录状态值存储到本地缓存上
                localStorage.setItem('login',true);
                //路由变到Home界面
                this.$router.push({
    
    name:'Home'});
            }
        }
    },
}
</script>
<style>
</style>

首先呈现的页面结果：首先为登陆界面

接下来登陆后：

密码正确登录成功后路由变为 / 进入Home界面，本地储存也有了login true 的值 说明缓存成功。
将缓存值删除后 页面变为：

将缓存值删除后 页面又变为登录界面。

路由的私有守卫 设置：

const routes = [
  {
    
    
    path: "/",
    name: "home",
    component: Home,
    //路由私有守卫
    beforeEnter: (to, from, next) => {
    
    
      //console.log(to);
      next();
    },

组件内部守卫详解链接：
https://blog.csdn.net/weixin_47863547/article/details/119245367