uni-app中使用lodash_Vue实战篇｜使用路由管理用户权限（动态路由）

最新推荐文章于 2024-09-13 14:08:36 发布
最新推荐文章于 2024-09-13 14:08:36 发布
阅读量992 收藏 3
点赞数
文章标签： uni-app中使用lodash vue 路由跳转后执行跳转后的页面里的函数
本文介绍了在uni-app中如何利用lodash进行权限控制，通过getCurrentAuthority获取用户权限，check函数进行校验，isLogin检查用户登录状态。在路由配置中设置元信息meta，结合router.beforeEach实现动态路由权限校验。当权限不符时，会引导用户至相应页面。文章还展示了不同权限用户看到的菜单区别，并预告了更精细化的权限设计内容。
摘要由CSDN通过智能技术生成

权限控制是后台管理系统比较常见的需求，如果我们需要对某些页面的添加权限控制的话，那我们可以在路由管理中的权限做一些校验，没有通过权限校验的给出相应的提示或者直接跳转到报错页面。

跟着我一起来学vue实战篇路由管理权限吧!

权限校验函数

  • getCurrentAuthority()函数用于获取当前用户权限，一般来源于后台数据
  • check()函数用于权限的校验匹配
  • isLogin()函数用于检验用户是否登录
e571b32457e01332da524c2825792b06.png

路由配置元信息

  • 路由配置元信息meta:{ authority: ["admin"] }
50023ef1bd583971e4904cbdcef659cb.png

路由守卫router.beforeEach中判断

  • 使用to.matched获取跳转路由的全部信息,包括父路由和子路由
  • 使用lodash中的findLast匹配离跳转路由配置权限的元信息
  • 引入auth.js中check()和isLogin()进行判断是否具有权限或是否已登录</
最低0.47元/天 解锁文章
weixin_39622521
关注
uni-app中使用lodash_uniapp 基础
weixin_39692253的博客
11-21 1500
1.uni app 首次运行在微信开发者程序中时要打开设置->安全设置->服务端口2.开发规范：3.页面配置（pages.json）4.单页面配置（h5配置等）5.配置tabbar属性值实例（注意：tabbar配置后还需要把路径配置到pages.json，如页面配置一样）7、万物基于基础(基础组件)（常用）①、②、view实例③、button④、image8、uniapp的样式<...
uni-app中使用lodash_uniapp小知识-2
weixin_39585378的博客
11-22 1155
前言  之前学过一段时间的unaipp，但是总是没有正式的拿他做过一些东西，现在开始实践，消化一下知识点。开搞  1.自定义标题栏修改pages.json自定义  2.数组去重var max = 24;var min = 0;var arr = new Array(max);for (var i = 0; i < max; i++) { var k = parseInt(Math.ra...
uniapp 实现路由拦截，权限或者登录控制
LlanyW的专栏
01-27 4265
调用uni.addInterceptor（）,添加拦截，在main.js引入这个文件。那么在每一个跳转页面时，这个拦截（）=>{}方法勾子就会被调用。为了兼容其他端的跳转权限控制，uni-app并没有用vue router路由，而是内部实现一个类似此功能的钩子：拦截器，由其统一管理。uni.addInterceptor(STRING, OBJECT) | uni-app官网。拦截器的适用场景非常多，比如路由拦截，权限引导等，所以可以采用拦截器来实现。项目需要判断token，即是否登录，登录之后权限。
Uniapp_路由权限控制
最新发布
Rainbow_bead的博客
09-13 217
路由由后台控制，不同用户存在不同权限。
uniApp 使用lodash插件
m0_57547956的博客
09-18 3776
开发中会遇到一些防抖和节流等需求，loadsh已经写好了，直接引入使用 官网地址：https://www.lodashjs.com/ npm i loadsh 安装后 在main.js中引入 import _ from 'loadsh' 注册到全局 Vue.prototype.$_ = _ ; 举例:多维数组转一维 let arr = [1,2,3,4,[5,6,7,[8,9]]]; let newArr = this.$_flattenDeep(arr) ; 就可以得到 -.
在uniapp项目中使用lodash
m0_55258023的博客
07-11 5151
在uniapp项目中使用lodash
什么，lodash 的防抖失效了？
小生方勤
11-18 1038
背景在使用 uni-app 开发小程序时，有个填写表单的需求，包含两个输入框，看起来像这样image-20201107143814796两个在普通不过的输入框因为需要复用一些样式和逻辑，...
uni-app中使用lodash_如何修复Vue中的 “this is undefined” 问题
weixin_39744606的博客
10-27 598
当我们使用 Vue 在愉快的开发项目的时候，突然报了一个错误：thisisundefined别担心，不只有你一个人，我也经常遇到这个问题很多次，接下我们一起来看看如何解决这个问题。一个可能的原因是混淆了常规函数和箭头函数的用法，如果你遇到这个问题，我猜你用的是箭头函数。如果用常规函数替换箭头函数，它可能会为你修复这个问题。我们再深入一点，试着理解为什么会这样。毕竟，知识就是力量，如果知道造成问...
uni-crazy-router:一个更贴合uni-app的router插件，一切都使用uni-app原生钩子实现和方法实现，抛弃了vue-router的影子
03-21
一个更贴合uni-app的router插件，一切都使用uni-app原生钩子实现和方法实现，抛弃了vue-router的影子 qq群：701697982 注意 由于条件限制，仅在H5环境和微信小程序环境，以及app端android和ios环境进行过测试感谢某...
uni-app-bottom-navigation-master.zip_kidslme_uni-app_uniapp 二级分类
09-24
2. **路由管理（Route Management）**：uni-app使用Vue Router进行页面路由管理，通过定义路由规则来控制页面的跳转。在二级分类场景中，每个一级分类下可能对应多个二级分类页面，需要正确配置路由以确保正确跳转。...
uni-router-interceptor:适用于uni-app的简单路由器拦截器
05-25
uni-router-interceptor a simple router interceptor for uni-app uni-router-interceptor 是一个基于uni-app框架的纯路由拦截插件 由于自己的项目需要一个类似 vue-router 的路由拦截功能，本人考察了 uni 插件市场的大部分这一类的插件，发现 很多插件都配置特别繁琐，并且编译成微信小程序后还有路由层级限制，最多只能 navigateTo 十层，这就让自己很难受了，于是自己也有了造一个轮子的想法。 解决这个问题我的思路是到10层时直接 reLaunch 清空一下路由栈，自己把路由的历史记录保存起来，方便进行路由回退 如果有更好的方法，欢迎各位大佬提出意见 下载插件后直接导入即可，用法基本和 Vue-Router 一样 本插件的本质还是 uni 的自带路由，只是对 uni 的自带路由进行了包装 安
uni-app，一个使用Vue.js开发所有前端应用的框架
07-11
- **路由与请求**：uni-app自带路由管理和网络请求功能，如`uni.navigateTo`用于页面跳转，`uni.request`用于发起网络请求。 #### 六、开发基础知识 - **编码规范**：建议遵循一致的代码缩进和空格规则，使用有...
在uniapp中使用Lodash进行节流
KindomJ的博客
06-23 1564
#下载Lodash在项目中 num i lodash
uniapp如何实现路由守卫、路由拦截，权限引导
热门推荐
柑橘乌云_
09-14 1万+
在上述代码中，我们通过监听beforeRouterEnter事件来实现路由守卫。在回调函数中，你可以根据实际需求进行相应的验证和逻辑操作。如果需要继续导航到目标页面，调用next()方法；如果需要取消导航，可以选择不调用next()方法。也就是说在你要跳转页面时候，触发这个事件，然后回调里面（next()）写navigateTo。经过一番网上冲浪发现，有两种方式可以实现，新建interceptor.js。然后在main.js中引入。
uniapp配置权限
qq_41429765的博客
09-02 3629
在登录的时候后端接口查出当前用户可进入页面路由的数组 前端在每个页面的详情页执行验证，如果当前的路由不包含返回的数组中的内容则出现蒙板 前端获取当前页面路由的方式是： onLoad(){ let routes = getCurrentPages(); // 获取当前打开过的页面路由数组 let curRoute = routes[routes.length - 1].route //获取当前页面路由 console.log(curRoute); let curParam = routes[r
uniapp App权限配置
皮皮的博客
07-07 3951
uniapp App权限配置
移动校园(8): Uniapp 中路由守卫进行用户权限管理--不同用户不同功能
2301_77133858的博客
07-08 303
思路，在登录之后将用户类型type写入本地存储，然后在前置路由守卫里面读取然后鉴权。
如何在uni-app中使用Vue-router呢？
07-08
在uni-app中使用Vue-router非常简单，只需按照以下步骤操作： 1. 安装Vue-router：打开终端，进入uni-app项目根目录，执行以下命令安装Vue-router： ``` npm install vue-router ``` 2. 创建路由文件：在src目录下创建一个名为router的文件夹，在router文件夹中创建一个名为index.js的文件。 3. 配置路由：在index.js中编写路由配置代码，例如： ```javascript import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const router = new Router({ routes: [ { path: '/home', name: 'Home', component: () => import('@/pages/Home.vue') }, { path: '/about', name: 'About', component: () => import('@/pages/About.vue') }, // 其他路由配置... ] }) export default router ``` 4. 在main.js中引入路由：打开main.js文件，在顶部引入路由文件，并在Vue实例中配置路由： ```javascript import Vue from 'vue' import App from './App' import router from './router' Vue.config.productionTip = false new Vue({ router, // 配置路由 render: h => h(App) }).$mount('#app') ``` 5. 使用路由：在需要使用路由的页面组件中，使用`<router-link>`和`<router-view>`标签进行路由导航和路由渲染。例如，在Home.vue中使用`<router-link>`和`<router-view>`： ```html <template> <div> <router-link to="/about">Go to About</router-link> <router-view></router-view> </div> </template> ``` 至此，你已经成功在uni-app中使用Vue-router了。可以根据需要配置更多的路由和页面组件，实现完整的路由功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值