Angular 2 application role access decorator, wrapping built in CanAccess functionality. Prevents view transitions when user roles are not appropriate.

authentication.ts

import { Injectable } from 'angular2/core';
import { Storage } from './storage';
import { CurrentUser } from '../interfaces/common';

@Injectable()
export class Authentication{
    private _storageService : Storage;
    private _userKey : string = "CURRENT_USER";

    constructor(storageService : Storage){
        this._storageService = storageService;
    }
    
    authenticate(name : string, password: string){
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                this.currentUser = {
                    name,
                    roles : ['ADMIN']
                 };
                 resolve(true);
            }, 100);
        });
    }
    
    logOut(){
        this._storageService.removeStorage(this._userKey);
    }
    
    get userRoles() : Array<string> {
        const user = this._storageService.getStorage(this._userKey);
        return user ? user.roles : [];     
    }
    
    get currentUser() : CurrentUser {
        return this._storageService.getStorage(this._userKey);
    }
    
    set currentUser(user : CurrentUser){
        this._storageService.setStorage(this._userKey, user);
    }
     
}

home.ts

import { Component } from 'angular2/core';
import { Roles } from '../decorators/roles';

@Component({
	selector: 'home',
	template: `<h1>{{title}}</h1>`
})
@Roles('ADMIN')
export default class Home{ 
	title : string = "Home View!";
}

role-decorator.ts

import { Injector } from 'angular2/core';
import { CanActivate, ComponentInstruction } from 'angular2/router';
import { Authentication } from '../services/authentication';
import { Storage } from '../services/storage';
import { CurrentUser } from '../interfaces/common';


export const Roles = (...rolesAllowed : Array<string>) => {
    return CanActivate((next: ComponentInstruction, prev: ComponentInstruction) => {
        //this would not work if user info was not being kept in session storage
        //as of now it doesn't seem possible to access same-instance application services through non-components
        const injector = Injector.resolveAndCreate([Authentication, Storage]);
        const authentication : Authentication = injector.get(Authentication);
        const userRoles : Array<string> = authentication.userRoles;
        return isAllowedAccess(rolesAllowed, userRoles);
    });
};

const isAllowedAccess = (rolesAllowed: Array<string>, currentRoles: Array<string>) => {
    const intersectedRoles = currentRoles.reduce((acc, curr) => {
        return [
            ...acc,
            ...rolesAllowed.filter(role => role.trim().toUpperCase() === curr.trim().toUpperCase())
        ]
    }, []);
    return intersectedRoles.length > 0;
};

can i apply the @ROLE anotation on a specifics methods not for the global component ?

I don't think so. @ROLE(..) function is returning a CanActivate object, it's applied only to Components.

XD

For more easier approach I found this blog more helpful http://coding-karma.com/2018/06/17/role-based-access-control-in-angular-4-route-guards-in-depth/