Added page visibility configurability.

This commit is contained in:
mmihaly 2023-12-21 19:19:36 -07:00
parent 40c9b41805
commit 3bf58308ff
3 changed files with 40 additions and 8 deletions

View File

@ -55,13 +55,25 @@ With authentication set up, by default no access is allowed to your dashboard wi
### Granular Access ### Granular Access
You can use the following properties to make certain sections or items only visible to some users, or hide sections and items from guests. You can use the following properties to make certain pages, sections or items only visible to some users, or hide pages, sections and items from guests.
- `hideForUsers` - Section or Item will be visible to all users, except for those specified in this list - `hideForUsers` - Page, Section or Item will be visible to all users, except for those specified in this list
- `showForUsers` - Section or Item will be hidden from all users, except for those specified in this list - `showForUsers` - Page, Section or Item will be hidden from all users, except for those specified in this list
- `hideForGuests` - Section or Item will be visible for logged in users, but not for guests - `hideForGuests` - Page, Section or Item will be visible for logged in users, but not for guests
For Example: For Example:
```yaml
pages:
- name: Home Lab
path: home-lab.yml
displayData:
showForUsers: [admin]
- name: Intranet
path: intranet.yml
displayData:
hideForGuests: true
hideForUsers: [alicia, bob]
```
```yaml ```yaml
- name: Code Analysis & Monitoring - name: Code Analysis & Monitoring

View File

@ -29,6 +29,7 @@
<script> <script>
import IconBurger from '@/assets/interface-icons/burger-menu.svg'; import IconBurger from '@/assets/interface-icons/burger-menu.svg';
import { makePageSlug } from '@/utils/ConfigHelpers'; import { makePageSlug } from '@/utils/ConfigHelpers';
import { checkPageVisibility } from '@/utils/CheckPageVisibility';
export default { export default {
name: 'Nav', name: 'Nav',
@ -45,10 +46,11 @@ export default {
computed: { computed: {
/* Get links to sub-pages, and combine with nav-links */ /* Get links to sub-pages, and combine with nav-links */
allLinks() { allLinks() {
const subPages = this.$store.getters.pages.map((subPage) => ({ const subPages = this.$store.getters.pages.filter((page) => checkPageVisibility(page))
path: makePageSlug(subPage.name, 'home'), .map((subPage) => ({
title: subPage.name, path: makePageSlug(subPage.name, 'home'),
})); title: subPage.name,
}));
const navLinks = this.links || []; const navLinks = this.links || [];
return [...navLinks, ...subPages]; return [...navLinks, ...subPages];
}, },

View File

@ -0,0 +1,18 @@
/**
* A helper function that checks if a page is visible based on current users permissions
* Checks a page's displayData for hideForUsers, showForUsers and hideForGuests
* Returns a boolean that determines if the user has the required permissions
*/
// Import helper functions from auth, to get current user, and check if guest
import { getCurrentUser } from '@/utils/Auth';
import { isVisibleToUser } from '@/utils/IsVisibleToUser';
/* Putting it all together, the function to export */
export const checkPageVisibility = (page) => {
const currentUser = getCurrentUser(); // Get current user object
const displayData = page.displayData || {};
return isVisibleToUser(displayData, currentUser);
};
export default checkPageVisibility;