vue-router 鉴权守卫

最新推荐文章于 2024-06-12 10:37:22 发布

shiqianhui1124

最新推荐文章于 2024-06-12 10:37:22 发布

阅读量250

点赞数

文章标签： vue

本文链接：https://blog.youkuaiyun.com/shiqianhui1124/article/details/117635283

版权

本文介绍了Vue Router的路由守卫机制，包括全局守卫、单个路由守卫和组件内部守卫的使用方式，详细阐述了它们的参数和执行流程。特别是重点讲解了鉴权场景下的应用，如如何实现登录鉴权，防止未登录用户访问特定页面，以及在beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave不同阶段如何操作以控制路由跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ⅰ、路由守卫：

概念：路由守卫就是路由跳转的一些验证，比如登录鉴权（没有登录不能进入个人中心页）等。

路由守卫分为三大类：

1. 全局守卫：前置守卫：beforeEach 后置钩子：afterEach

2. 单个路由守卫：独享守卫：beforeEnter

3. 组件内部守卫：beforeRouteEnter、 beforeRouteUpdate、 beforeRouteLeave

参数：所有的路由守卫都有三个参数

to： 要进入的目标路由（去哪儿）

from： 要离开的路由（从哪来）

next： 是否进行下一步（要不要继续）

写next()相当于 next(true) 继续执行

不写相当于next(false)终止执行

next(path)跳转例如：next("/login")

注：后置钩子afterEach没有next参数。

详细使用：

1、全局前置守卫 beforEach：

router.beforeEach((to, from, next) => {
  if (to.meta.permission) {
    if (sessionStorage.getItem("token")) {
      next();
    } else {
      alert("请先登录");
      next("/login");
    }
  } else {
    next();
  }
});

2、全局后置钩子afterEach（少用）：

router.afterEach((to, from) => {
  // to and from are both route objects.
});

单个路由守卫：

  // 首页模块路由
  {
    path: "/index",
    name: "index",
    meta: { permission: true },
    component: () => import("../views/Index.vue"),
    beforeEnter: function(to, from, next) {
      if (sessionStorage.getItem("token")) {
        next();
      } else {
        alert("请先登录");
        next("/login");
      }
    }
  },

组件内部守卫：

和data、created、mounted、methods处于平等关系

用beforeRouteEnter举例说明：

  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    if (sessionStorage.getItem("token")) {
      next();
    } else {
      alert("请先登录");
      next("/login");
    }
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  },

beforeRouteEnter 是进入前

beforeRouteUpdate 是路由变化时

beforeRouteLeave 是离开后。这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

注意：
beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。

Ⅱ、鉴权：

登录鉴权案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../vue.js"></script>
  <script src="./vue-router.js"></script>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #navgation{
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 30px;
      font-size: 18px;
      background-color: rgba(127, 255, 212,0.5);
      display: flex;
      justify-content: space-around;
    }
    #navgation>a{
      text-decoration: none;
      width: 30%;
      text-align: center;
    }
    #navgation .router-link-active{
      background-color: rgba(127, 255, 212, 1);
      color: seagreen;
    }
    .router-link-active{
      color: steelblue;
    }
  </style>
</head>
<body>
  <div id="app">
    <div id="navgation" >
      <router-link to="/home" >主页</router-link>
      <router-link to="/news" >新闻</router-link>
      <router-link to="/user" >我的</router-link>
    </div>
    <router-view></router-view>
  </div>
</body>
<script>
const Home = {
  template: `
    <div>
      <h1>Home页</h1>
    </div>
  `
}
const News = {
  template: `
    <div>
      <h1>News页</h1>
    </div>
  `
}
const User = {
  template: `
    <div>
      <h1>User页</h1>
    </div>
  `
}
const Login = {
  template: `
    <div>
      <button @click = "login">登录</button>
    </div>
  `,
  methods: {
    login () {
      // 定义一个token用来存储登录密钥
      const token = 'sdkajfklsajdf';
      // 实现浏览器本地存储
      localStorage.setItem('access_token',token);
      if(this.$route.params.fullPath){
        this.$router.push(this.$route.params.fullPath)
      }else{
        this.$router.push('/home')
      }
    }
  }
}
const NotFound = {
  template: `
    <div>
      <h1>404</h1>
      &nbsp;&nbsp;<h2>找不到页面</h2>
    </div>
  `
}
 
// 定义路由
const routes = [
  // 路由规则
  {
    path: '/',
    redirect: '/home' // 重定向到home页
  },{
    path: '/home',
    name: '首页',
    meta:{
      needLogin: false
    },
    component: Home
  },{
    path: '/news',
    name: '新闻',
    meta:{
      needLogin: true
    },
    component: News
  },{
    path: '/user',
    name: '用户',
    meta:{
      needLogin: false
    },
    component: User
  },{
    path: '/login',
    name: '登录',
    component: Login
  },{
    // 定义404的路径
    path: '*',
    name: '404',
    component: NotFound
  }
]
const router = new VueRouter({
  routes
})
router.beforeEach((to,from,next)=>{
  const access_token = localStorage.getItem('access_token')
  console.log(to);
  if(to.fullPath == '/login' || to.fullPath == '/register' || access_token || !to.meta.needLogin){
    next()
  }else{
    next({
      name: '登录',
      params: {
        from: to.fullPath
      }
    })
  }
})
const vm = new Vue({
  el: '#app',
  router,
 
})
</script>
</html>