路由的安全守卫:在路由跳转之前或者跳转之后做一些处理。
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