08 使用Vue+vue-router+路由守卫实现路由鉴权功能实战

已于 2023-07-25 11:13:28 修改
阅读量4.7k 收藏 80
点赞数 77
分类专栏： Vue + SpringBoot前后端分离项目实战 文章标签： vue.js javascript 前端 elementui spring boot
于 2023-03-26 22:56:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingyu_qie/article/details/129719283
版权

目录

一、本节介绍和上节回顾

1. 上节介绍

2. Vue + SpringBoot前后端分离项目实战的目录

3. 本小节介绍 

二、Vue-router改造以及路由鉴权

1. 路由数据的拆分

2. 路由守卫

三、404错误页的实现

1. 创建全局css样式

2. 全局样式引入

3. 404页面的开发

4. el-button的自研实现 

5. 实现效果 

四、本项目进展图例介绍

1. 内容架构

2. 代码目录 

五、读完本小节需要思考的几个问题

一、本节介绍和上节回顾

1. 上节介绍

上一节，是在项目搭建完成之后的继续基建工作，基于Vue技术栈，做了Less的安装和常见安装问题的解答，axios的安装，基本使用，二次封装，然后是基于内聚性和耦合性对整个axios请求做了拆解，以及ElementUI的安装和基本验证。还不太了解项目上下文的同学可以去专栏里查找，或者直接阅读基于Vue+Less+axios封装+ElementUI搭建项目底层支撑实战

了解本专栏 订阅专栏 解锁全文 超级会员免费看
经海路大白狗
关注
  • 77
    点赞
  • 踩
  • 80
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 128
    评论
专栏目录
订阅专栏
vue-router路由守卫以及鉴权
mszLOVEyjj的博客
06-06 6002
首先我们先了解路由守卫： 路由守卫有点类似于ajax的请求拦截，就是请求发送之前先给你拦截住一些事情之后再去发送请求，同样这里的理由守卫意思差不多；简单理解为就是你进路由之前，首先把你拦住，对你进行检查；当然，路由守卫不仅仅只是在你进入之前拦住你，还有其他钩子函数进行其他操作； vue-reuter提供了三大类钩子函数来实现路由守卫 1.全局钩子函数（beforEach，afterEach） 2.路由独享的钩子函数（beforeEnter） 3.组件内的钩子函数（beforerouterEnter，befo
uni-simple-router实现简单的路由守卫
04-21
本示例“uni-simple-router实现简单的路由守卫”旨在教你如何利用uni-simple-router库来实现这一功能。uni-simple-router是专为uni-app设计的一个轻量级路由管理插件，它提供了一些强大的特性，包括路由守卫，使我们...
vue路由守卫（页面鉴权）
前端泡面人
07-26 1273
vue路由守卫
vue2+vue3后台管理之路由鉴权
最新发布
AROUND
05-08 367
在常见的后台管理项目中必定有的路由权限的相关问题，那么今天我们就来手膜手教程实现管理后台的路由鉴权，分别区分vue2和vue3分别的实现方式，那就直接上干货在Vue 2.x中实现路由鉴权，主要通过vue-router的导航守卫（navigation guards）来完成。
Vue路由鉴权
LQlove1的博客
05-25 955
3.如果存在并且有效就放行，但是不能到login页面。4.如果不存在或者token过期就按未登录处理。2.如果存在判断token是否有效。1.首先判断token是否存在。5.未登录只能在login页面。
vue-router 鉴权
weixin_47420579的博客
06-04 270
登录成功后做本地存储与store存储，并进行跳转。 1、Login.vue关键代码 async handleLogin(e) { e.preventDefault() let parmas = { username: this.model.username, password: this.model.password } const res = await this.$http.get('/api/login', params) const {
vue项目-路由鉴权
爱蹦哒的咸鱼的博客
02-22 254
一篇文章轻松搞定路由鉴泉
vue3.x+vite+ts+vue-router@4.x 路由使用demo
07-24
8. **路由守卫**：Vue Router 提供了多种类型的导航守卫，如全局前置守卫、组件内守卫和路线独享守卫，用于在导航发生时执行条件判断或异步操作。 9. **路由元信息（meta）**：可以为每个路由定义 meta 字段，用来...
搭建Vue从Vue-cli到router路由护卫的实现
12-13
1、Vue-cli基础使用 1.1 创建测试项目 vue create vue-routes 1.2 创建成功,启动项目 yarn serve 在 http://localhost:8080/ 就可以看到欢迎:clap:页面了 1.3 搞点自定义配置,新建vue.config.js const title = ...
vue-router 实现导航守卫（路由卫士）的实例代码
12-04
Vue Router 是 Vue.js 应用中的官方路由管理库，它提供了强大的导航控制功能，其中的导航守卫（Navigation Guards）是实现路由保护的一种机制。这些守卫允许你在路由发生改变时执行逻辑，如验证用户权限、加载数据等...
Vue+vue-router+路由守卫实现路由鉴权功能
一步一个脚印，踏实努力，向着目标前进
05-31 2103
在路由设置中，我们将路由拆分为两类，需要进行鉴权的路由和不需要进行鉴权的路由。需要进行鉴权的路由需要在路由元信息中添加requiresAuth: true属性。路由鉴权功能是Vue+vue-router框架中常见的功能之一，也是前端安全性的一个重要方面。最后，在需要鉴权的页面中，我们可以使用beforeRouteEnter守卫来在进入页面前获取用户信息。在路由设置中，我们为需要鉴权的路由添加requiresAuth元信息。
Vue 权限控制的两种方法(路由验证)
12-08
下面介绍两种权限控制的方法： 路由元信息(meta) 动态加载菜单和路由(addRoutes) 路由元信息(meta) 如果一个网站有不同的角色，比如 管理员 和 普通用户 ，要求不同的角色能访问的页面是不一样的 这个时候我们就可以 把所有的页面都放在路由表里 ，只要 在访问的时候判断一下角色权限 。如果有权限就让访问，没有权限的话就拒绝访问，跳转到404页面 vue-router 在构建路由时提供了元信息 meta 配置接口，我们可以在元信息中添加路由对应的权限，然后在路由守卫中检查相关权限，控制其路由跳转。 可以在每一个路由的 meta 属性里，将能访问该路由的角色添加到 role
vue路由权限校验功能的实现代码
11-20
引言 做后台系统的时候，难免会有用户权限的判断。admin可以查看全部菜单，user只能查看部分菜单。 一开始接触这个需求的时候，完全是纯前端做的。在配置路由的时候，加一个roles的属性，通过判断用户的roles是否与路由的roles属性相匹配来作为显示隐藏的依据 { path: '/router', name: 'router', meta: { title: '标题', roles: ['admin','user'] }, component: index, children: [ { path: 'children', name: 'children', me
vue-router 鉴权 守卫
LiuBo_1999的博客
06-04 121
一、怎么理解vue-router 路由导航守卫 又叫路由的钩子函数又叫路由的生命周期函数 就是路由 从开始进入路径到跳转结束这个过程中 到了某个阶段会自动执行的函数 二、实现鉴权的方式分两种： 1、通过vue-router addRoutes 方法注入路由实现控制 通过请求服务端获取当前用户路由配置，编码为 vue-router 所支持的基本格式（具体如何编码取决于前后端协商好的数据格式），通过调用 this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例
vue项目登录鉴权 + 动态路由
qq_24518001的博客
11-20 2126
vue项目登录鉴权 + 动态路由
vue-router的鉴权 守卫
weixin_57980265的博客
06-06 214
vue-router鉴权的方式 1、通过vue-router addRoutes 方法 通过请求服务端获取当前用户路由配置，编码为 vue-router 所支持的基本格式（具体如何编码取决于前后端协商好的数据格式），通过调用 this.$router.addRoutes 方法将编码好的用户路由注入到现有的 vue-router 实例中去，以实现用户路由。 addRoutes 方法仅仅是帮你注入新的路由，并没有帮你剔除其它路由！ 2、通过vue-router beforeEach 钩子限制路由跳转 通过
Vue路由守卫详解
drhnb的博客
07-11 8235
路由守卫是Vue Router提供的一种机制，用于在导航过程中对路由进行控制和管理。通过使用路由守卫，你可以在路由切换前、切换后以及错误处理时执行相应的逻辑。
Vue/React实现路由鉴权/导航守卫/路由拦截(react-router v6)
Coding and studying
08-30 9015
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React框架。
vue3 + ts +pinia+element-plus+mock 项目---动态路由+用户权限路由篇
12-08
为了实现动态路由和用户权限路由，我们需要进行以下步骤： 1. 安装依赖 ```shell npm install vue-router@4 pinia element-plus mock -S npm install @types/mock -D ``` 2. 创建路由配置文件 在src文件夹下创建...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 128
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

经海路大白狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值