Vue学习：29-导航守卫之全局前置守卫

查看以下情形：

1、点击主页链接时，默认情况下可直接进入指定界面，但是问题是该跳转的界面是需要用户登录后方可访问的

2、可设置导航守卫来检测用户是否登录，如果已登录，则进入后台页，如果未登录，则强制进入登录页，如图

什么是全局前置守卫？

每次发生路由的导航跳转时，都会触发全局前置守卫，因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制

使用router.beforeEach((to, from, next) => {})注册一个全局前置守卫

1、to：将要访问的路由信息对象

2、from：将要离开的路由信息对象

3、next：函数

a. 调用next()表示放行，允许这次路由导航

b. 调用next(false)表示不放行，不允许此次路由导航

c. 调用next({ routerPath })表示导航到此地址，一般情况用户未登录时，会导航到登陆界面

提示：该函数在前置守卫中可出现多次，但是只能被调用一次!!!

案例：

src/router/index.js

import { createRouter,createWebHashHistory } from "vue-router";
import HomeView from '@/views/HomeView.vue'
import LoginView from '@/views/LoginView.vue'
import MainHomeView from '@/views/admin/MainHomeView.vue'
import UserManagerView from '@/views/admin/UserManagerView.vue'
import BlogHomeView from '@/views/blog/BlogHomeView.vue'

let routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',  //URL地址
    name: 'home',   //名称
    component: HomeView  //渲染该组件
  },
  {
    path: '/blog',
    name: 'blog',
    component:BlogHomeView    
  },
  {
    path: '/login',
    name: 'login',
    component: LoginView   
  },
  {
    path: '/admin/main',
    name: 'admin-main',
    meta: { isLogin:true },  //自定meta属性，isLogin是否需要用户登录
    component: MainHomeView
  },
  {
    path: '/admin/user',
    name: 'admin-user',
    meta: { isLogin:true },
    component: UserManagerView
  }
]

//创建路由
const router = createRouter({
  history: createWebHashHistory(),  // 使用hash模式路由
  routes    //路由规则
})


//注册全局前置守卫
//to  将要访问的路由信息对象
//from  将要离开的路由信息对象
router.beforeEach((to,from,next) => {
  //判断将要访问的路由信息对象是否需要用户登录
  if(to.meta.isLogin) {
    let userLogin = localStorage.getItem('loginUser')  //获取存储对象
    //判断用户是否已经登录
    if(userLogin == null) {
      //未登录跳转至登录页
      return next({ path: '/login' })
    }
  }
  return next()   //放行
})

export default router   //暴露出去

App.vue

<script setup>
import { useRouter } from 'vue-router';  

const routerObj = useRouter()
</script>

<!-- 视图区域（view） -->
<template>
  <!-- 路由链接，点击后路由地址会切换到属性to的地方 -->
  <router-link to="/home">首页</router-link>
  
  <router-link to="/blog">博客</router-link>

  <router-link to="/login">登录</router-link>

  <router-link to="/admin/main">管理员首页</router-link>

  <router-link to="/admin/user">用户管理页面</router-link>

  
  <hr>

  <!-- 路由视图，路由切换组件展示的地方 -->
  <router-view/>
</template>
<style>
 
</style>

LoginView.vue

<script setup>
import { reactive } from 'vue';

const user = reactive({
  account: '',
  password: ''
})

function toLogin() {
  localStorage.setItem('loginUser',JSON.stringify(user))  //存储对象到本地
  alert('登录成功')
}

function loginOut() {
  localStorage.removeItem('loginUser')   //删除存储对象
  alert('注销成功')
}

function isLogined() {
  let userLogin = localStorage.getItem('loginUser')  //获取存储对象
  console.log(userLogin)
}

</script>

<template>
  <div class="login">
    登录界面
    <hr>
    账号：<input type="text" v-model="user.account">
    <br>
    密码：<input type="password" v-model="user.password">
    <br>
    <button @click="toLogin">登录</button>
    <button @click="loginOut">注销</button>
    <button @click="isLogined">查看是否已经登录</button>
  </div>
</template>

<style scoped>
  div.login {
    padding: 50px;
    background-color: orange;
  }
</style>

MainHomeView.vue

<template>
  <div class="main">
    管理员后台主页界面
  </div>
</template>

<style scoped>
  div.main {
    padding: 50px;
    background-color: rgb(192,69,69);
  }
</style>

UserManagerView.vue

<template>
  <div class="user">
    用户管理后台主页界面
  </div>
</template>

<style scoped>
  div.user {
    padding: 50px;
    background-color: rgb(50,119,184);
  }
</style>

HomeView.vue

<template>
  <div class="home">网站首页界面</div>
</template>

<style scoped>
  div.home {
    padding: 50px;
    background-color: pink;
  }
</style>

BlogHomeView.vue

<template>
  <div class="blog">
    博客首页界面：
    <router-link to="/blog/blog-content/23">博客23</router-link>
    <router-link to="/blog/blog-content/75">博客75</router-link>
    <hr>
    <router-view/>
  </div>
</template>

<style scoped>
  div.blog {
    padding: 50px;
    background-color: yellow;
  }
</style>