移动校园(8): Uniapp 中路由守卫进行用户权限管理--不同用户不同功能

思路,在登录之后将用户类型type写入本地存储,然后在前置路由守卫里面读取然后鉴权。

路由守卫VS拦截器

路由守卫主要管理前端之间页面的跳转

拦截器管理后端交互,

所以说权限管理需要路由守卫来做。

但是没有原生路由守卫,查了半天也没有合适的方法,为了简单快速实现,而且鉴权界面也比较少,所以就在onload生命周期钩子里面判断type类型来替代了,

然后上次一样的报错。。。。。

当前页面正在处于跳转状态,请稍后再进行跳转....

把uni挑战换成wx跳转就解决了,但是这个页面跳转会闪烁,后面再解决把

export const AuthSuperAndStu=()=>
{
	let arr=["superadmin","student"]
	return arr.includes(uni.getStorageSync("type"))

}

export const  AuthSuper=()=>
{
	let arr=["superadmin"]
	return arr.includes(uni.getStorageSync("type"))
}


export const  AuthVisitor=()=>
{
	let arr=["visitor"]
	return arr.includes(uni.getStorageSync("type"))
}

	onLoad(()=>
	{
		if(!AuthSuperAndStu())
		{
			uni.showToast({
				title:"您没有权限",
				icon:"error"
			})
			wx.switchTab({
				url:"/pages/more/more",
				fail:function(e)
				{
					console.log(e)
				}
			})

		}
	})

  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
UniApp 是一种基于 Vue.js 的跨平台开发框架,它可以帮助开发者快速构建跨平台的移动应用。在 UniApp ,可以通过一些方式来进行权限管理。 1. 页面级权限控制:可以在路由配置设置页面级别的权限,只有具备相应权限用户才能访问该页面。可以通过在路由配置设置 `meta` 字段来实现,例如: ```javascript { path: '/home', name: 'home', component: Home, meta: { requiresAuth: true // 需要登录才能访问 } } ``` 在页面跳转时,可以在全局路由守卫判断用户是否具备相应权限,如果没有则进行拦截。 2. 功能权限控制:可以根据用户角色或权限在页面内部进行功能级别的权限控制。可以在组件内部根据用户角色或权限进行判断,然后展示或隐藏相应的功能按钮或组件。 3. API 权限控制:如果应用需要调用后端接口,并且需要对接口进行权限控制,可以在后端接口添加权限验证逻辑。前端在调用接口前,先通过登录获取用户信息,然后将用户信息或权限信息传递给后端进行验证,后端根据验证结果返回相应的数据。 需要注意的是,在前端进行权限控制只是一种辅助手段,真正的权限验证应该在后端进行。前端的权限控制只是为了提高用户体验和安全性,避免未授权的用户进行某些操作。 以上是一些常见的 UniApp 权限管理方式,具体的实现方式可以根据项目需求和开发团队的实际情况进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值