Help with UserService Auth and Menus

[leskivan]

• I'm submitting a ...
• [ ] bug report
• [ ] feature request
• [X] support request
• [ ] other (Please specify)

Hi, I'm building app with two types of users (user and admin).

I'm going to need one menu (public links, links for users and links for admins)

• Admin can see all links
• User can see public an user links
• Other visitors can see only public links.

Can some point me i right direction to do this in frontend ( I've setup backend multi user auth middleware).

I tried to move menu from header page to new component (topmenu) but how can i "catch" when $auth ($auth.isAuthentichated()) changes?

topmenu.component.js

class TopmenuController {
    constructor($auth, $log) {
        'ngInject';
        this.auth = $auth;
    }
    isAuth() {
        $log.info(this.auth.isAuthenticated())
        if (this.auth.isAuthenticated()) {
            return true;
        }
        else {
            return false;
        }
    }
}
export const TopmenuComponent = {
    templateUrl: './views/app/components/topmenu/topmenu.component.html',
    controller: TopmenuController,
    controllerAs: 'vm',
    bindings: {}
}

topmenu.component.html

<div layout="row">
<div flex="90" flex-offset="5" class="DemoHeader-container">
<div layout="row" layout-align="space-between">
<img src="img/icons/logo.svg" ui-sref="app.landing" class="DemoHeader-logo" />
<div layout="row" layout-align="center stretch">
<a hide-xs class="DemoHeader-link md-subhead" ui-sref="">Public</a>
<a hide-xs class="md-subhead" ng-show="isAuth()" ui-sref="app.landing">User Can see this</a>
</div>
</div>
</div>
</div>

Is this even good approach?

[jadjoubran]

Hi @leskivan Yes this works! You can also refactor your isAuth() method into:

isAuth() {
        $log.info(this.auth.isAuthenticated())
        return this.auth.isAuthenticated();
    }

as isAuthenticated() is going to return a boolean