角色登录如何区分

4 篇文章 0 订阅
1 篇文章 0 订阅
					//获取后台接口 分出角色
					//选定角色  存到本地存储
      				if(this.servicer){
						/* 把区分企业和服务商的主关键字存到本地  juese:1企业  2服务商" */	
						uni.setStorageSync("jueseId",this.servicer.juese)
						let jueseId=uni.getStorageSync("jueseId")
						console.log(jueseId)
						this.setjuese(jueseId)
						}
					else if(this.company){
						/* 把区分企业和服务商的主关键字存到本地  juese:1企业  2服务商" */
						uni.setStorageSync("jueseId",this.company.juese)
						let jueseId=uni.getStorageSync("jueseId")
						console.log(jueseId)
						this.setjuese(jueseId)
					}


					//vuex
					const state = {
						juese:""//区分企业和服务商
					};
					const mutations = {
					//区分企业和服务商
						setjuese(state,val){
							state.juese=val
						}
					}

				//在App.vue中的onLaunch事件中 获取本地存储  利用commit再赋值一次
			     onLaunch: function(se) {
					/* 判断有没有jueseId 没有就加载上 */
					if(uni.getStorageSync('jueseId')){
						let jueseId= uni.getStorageSync('jueseId')
						this.$store.commit('setjuese',jueseId)
						}
					}
				
				//页面中
				<text>服务费:</text>
				//"juese==2" 禁用
							<input  v-if="juese==2" type="number" :value="service_fee" name="service_fee" />
							<text v-else style="color: red;font-weight:100">{{service_fee}}</text>
							<view class="ServiceCostText"></view>
  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
首先,你需要在后端实现用户角色区分,例如在用户表中添加一个字段存储用户角色。 然后,在前端实现不同用户角色登陆后显示不同的 tabbar,可以按照以下步骤进行: 1. 在 App.js 中定义一个 state,用于存储当前用户的角色信息。 ```javascript import React, { useState } from 'react'; import { View } from 'react-native'; import TabNavigator from './TabNavigator'; export default function App() { const [userRole, setUserRole] = useState(''); return ( <View style={{ flex: 1 }}> <TabNavigator userRole={userRole} /> </View> ); } ``` 2. 在登陆成功后,通过后端接口获取用户角色信息,并将其设置到 state 中。 ```javascript function handleLogin() { // 登陆逻辑,成功后获取用户角色信息 const role = 'admin'; // 假设当前用户角色为管理员 setUserRole(role); } ``` 3. 在 TabNavigator.js 中根据用户角色显示不同的 tabbar。 ```javascript import React from 'react'; import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'; import { Ionicons } from '@expo/vector-icons'; import HomeScreen from './HomeScreen'; import ProfileScreen from './ProfileScreen'; import AdminScreen from './AdminScreen'; const Tab = createBottomTabNavigator(); export default function TabNavigator({ userRole }) { return ( <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} options={{ tabBarIcon: ({ color, size }) => ( <Ionicons name="home" color={color} size={size} /> ), }} /> <Tab.Screen name="Profile" component={ProfileScreen} options={{ tabBarIcon: ({ color, size }) => ( <Ionicons name="person" color={color} size={size} /> ), }} /> {userRole === 'admin' && ( <Tab.Screen name="Admin" component={AdminScreen} options={{ tabBarIcon: ({ color, size }) => ( <Ionicons name="settings" color={color} size={size} /> ), }} /> )} </Tab.Navigator> ); } ``` 在上面的代码中,如果用户角色为管理员,则会显示一个名为 "Admin" 的 tab,否则不会显示。你可以根据自己的需求来修改这个逻辑。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

裴嘉靖

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

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

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

打赏作者

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

抵扣说明:

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

余额充值