简体   繁体   English

构建导航栏,该导航栏将根据登录的帐户类型而变化

[英]Structuring a navbar that will change based on type of account logged in

I have a web design question that I'm trying to puzzle out. 我有一个网页设计问题,我想解决。 Essentially I'm looking to design a navbar such that it will change what buttons/links are displayed in the navbar based on what type of account is signed in. So if a standard user is signed up they might see: 本质上,我正在设计导航栏,以根据登录的帐户类型更改导航栏上显示的按钮/链接。因此,如果注册了标准用户,他们可能会看到:

Site Name | 网站名称| Account Settings | 帐户设置| Logout 登出

But if an admin is logged in they would see: 但是,如果管理员已登录,他们将看到:

Site Name | 网站名称| Account Settings | 帐户设置| Manage Users | 管理用户| Logout 登出

I'm using MEANjs for this website, and I have an idea as to how to implement it, but I'm not positive it will work. 我正在为此网站使用MEANjs,并且对如何实现它有一个想法,但是我不确定它是否可以工作。 Basically in Appname\\public\\modules I think I can make a 'navbar' module, which will have HTML and a controller. 我认为基本上可以在Appname \\ public \\ modules中创建一个“ navbar”模块,该模块将具有HTML和一个控制器。 The controller would check what type of user is logged in and with conditional statements display certain links and not others. 控制器将检查登录的用户类型,并使用条件语句显示某些链接,而不显示其他链接。 Then in any of my views I would just include the navbar module as the top item. 然后,在我的任何视图中,我都只将navbar模块包括在内。 Would this be a good approach? 这是一个好方法吗?

Along these lines, I'm having trouble coming up with a way to customize other features based on what type of account is logged in. For instance, I want to do a standard home page for un-logged in users, say another home page for users that are logged in, and a third homepage for admins that are logged in. How should this all be handled with MEANjs in terms of file structure? 沿着这些思路,我很难根据登录的帐户类型来定制其他功能。例如,我想为未登录的用户创建一个标准主页,例如另一个主页。对于已登录的用户,以及为已登录的管理员提供的第三个主页。就文件结构而言,应如何使用MEANjs进行处理? A bit lost here and looking for some light to be shed, so thanks all. 在这里有点迷失了,正在寻找可以散发出的光,所以谢谢大家。 If it helps, here's a screenshot of the current site architecture: 如果有帮助,请看以下当前网站架构的屏幕截图:

http://i.imgur.com/j7IohQK.png http://i.imgur.com/j7IohQK.png

As for me, this is what I will do. 对于我来说,这就是我要做的。 I will have 3 tables. 我将有3张桌子。

  • Table for role if the user is an admin, superadmin, ordinary user, guest etc. 角色表(如果用户是admin,superadmin,普通用户,guest等)
  • Table for user account. 用户帐户表。

  • A bridge table for user and their role/s if a user can have more than one role. 用户及其角色的桥接表(如果用户可以具有多个角色)。

Then just check if the user is in a role. 然后只需检查用户是否在角色中即可。 Just do some conditional checking. 只是做一些条件检查。

Based on your example: If an admin is logged in they would see: 根据您的示例:如果管理员已登录,他们将看到:

Site Name | 网站名称| Account Settings | 帐户设置| Manage Users | 管理用户| Logout 登出

I just shared my view about this. 我只是对此发表了看法。 I'll leave this work to you. 我把这项工作留给你。 Let me know if you need more help. 让我知道您是否需要更多帮助。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 根据用户是否登录在 React 中更改 Navbar 值的正确方法是什么? - What is the correct way to change Navbar values in React based on if user is logged in? 根据用户是否登录来显示不同导航栏的方法是什么? - What are the ways to show different navbar based on if the user logged or not? 根据用户是否登录更改网站上的文本 - change text on website based if user is logged in or not Vue.js:无论用户是否登录,导航栏上的显示/隐藏按钮均基于Vuex商店状态 - Vue.js: Show/Hide buttons on navbar based on Vuex Store state when the user is logged in or not 为登录用户显示不同的导航栏 - Display different navbar for logged user ReactJS 根据滚动到具有动态高度的部分更改导航栏颜色 - ReactJS Change Navbar color based on scroll to section with dynamic height 如何根据登录的用户数据动态更改 API 端点 - How to dynamically change API endpoints based on the logged in user data 根据当前登录的用户(NodeJS、SocketIO、ChatApp)更改 CSS - Change CSS, based on the current user logged in (NodeJS, SocketIO, ChatApp) 如何根据有效网址更改导航栏中的图像? - How do I change the image in a navbar based on what the active url is? 如何根据屏幕宽度将导航栏类更改为另一个导航栏类? - How can I change my navbar class to another navbar class based on screen width?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM