使用router的meta实现前端页面级的访问控制

你的名字 2023-03-12 09:22 7阅读 0赞

#### 使用router的meta实现前端页面级的访问控制 ####

> [router-meta官方文档][router-meta]
> 
> 第一步：哪个页面路径需要设置访问控制，在`router.js`中添加meta属性
> 
>     const routes =[
>      {  path: 'create', name: 'movie-create', alias: 'edit',component: () => import('../views/movie/create.vue'), meta: {  requiresAuth: true } }
>     ]
> 
> 第二步：在router.js中
> 
>     // 第一步：引入store
>     import store from '../store/index'
>     
>     import {  Notification } from 'element-ui';
>     
>     // 路由导航守卫
>     router.beforeEach((to, from, next) => { 
>     // 判断是否有访问控制标识 meta
>     if (to.matched.some(record => record.meta.requiresAuth)) { 
>         // 判断是否登录（需要提前在store.js中，设置登录状态 isUserLogin）
>      if (store.state.isUserLogin) { 
>        next()
>      } else { 
>        // 友好提示
>        Notification({ 
>          title: '提示',
>          type: 'warning',
>          message: '请登录后再访问该页面'
>        });
>        next({ 
>          path: '/login',
>          query: {  redirect: to.fullPath }
>        })
>      }
>     } else { 
>      next() // 确保一定要调用 next()
>     }
>     })

[router-meta]: https://router.vuejs.org/zh/guide/advanced/meta.html#%E8%B7%AF%E7%94%B1%E5%85%83%E4%BF%A1%E6%81%AF

发表评论取消回复

表情：

评论列表（有 0 条评论，7人围观）

还没有评论，来说两句吧...

相关阅读

相关前端路由vue-router的基本使用

文章目录一.前端路由的概念与原理 1. 什么是路由 2.前端路由的工作方式二.vue-router 的基本用法 1.

桃扇骨/ 2024年04月08日 08:25/ 0 赞/ 78 阅读

相关 Vue router 单页面的控制中心

vue-router 路由就是组件之间进行切换的。路由的配置 router/index.js import Vue from 'vue'

秒速五厘米/ 2023年05月31日 06:53/ 0 赞/ 7 阅读

相关使用router的meta实现前端页面级的访问控制

使用router的meta实现前端页面级的访问控制 > [router-meta官方文档][router-meta] > > 第一步：哪个页面路径需要设置访问控制，在`

你的名字/ 2023年03月12日 09:22/ 0 赞/ 8 阅读

相关 vue-router的addRoute方法实现权限控制

在项目实践中，往往需要用户登录后由后端返回用户的权限，来动态配置路由,vue-router提供了两个方法router.addRoutes(),router.addRoute()

末蓝、/ 2023年01月17日 08:44/ 0 赞/ 123 阅读

相关 Vue实现页面的局部刷新（router-view页面刷新）

[https://blog.csdn.net/a5252145/article/details/102745598?utm\_medium=distribute.pc\_rel

港控/mmm°/ 2022年12月22日 11:23/ 0 赞/ 387 阅读

相关前端meta标签

meta主要用于设置网页的一些元数据，元数据不是给用户看的。 charset用于指定网页的字符集，<meta charset = "utf-8"> name

忘是亡心i/ 2022年08月31日 02:23/ 0 赞/ 213 阅读

相关 <meta实现页面跳转

1. <meta http-equiv="refresh" content="5"> 这个表示当前页面每5秒钟刷一下，刷一下~ 2. <m

深藏阁楼爱情的钟/ 2022年06月18日 01:08/ 0 赞/ 330 阅读

相关 vue-router 中 meta的用法

如果我想做下面这个功能： ![70][] 路由 ![70 1][] 代码： ![70 2][] 用这个获取 =========================

超、凢脫俗/ 2022年05月21日 05:04/ 0 赞/ 145 阅读

相关很实用的html meta标签实现页面跳转

就算你是有很多年开发经验的web开发工程师，有着很多web开发经验，对于先进的web开发技术有着很深刻的研究，然而你却忽略了那些最最基础的东西!现在我来问你，你是否对html所

谁践踏了优雅/ 2021年11月17日 14:56/ 0 赞/ 249 阅读

相关如何实现登录、URL和页面按钮的访问控制？

预计阅读时间：16 min 用户权限管理一般是对用户页面、按钮的访问权限管理。Shiro框架是一个强大且易用的Java安全框架，执行身份验证、授权、密码和会话管理，对于Shi

Dear 丶/ 2021年08月01日 01:14/ 0 赞/ 196 阅读