Repository navigation
CanRender Feature - Not to render a router link in the first place - Automatically #12499
Description
I'm submitting a ...
[ ] bug report => search GitHub for a similar issue or PR before submitting
[x ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
A router is mostly self-aware and can also guard itself via one or more helper services. What if the route never renders itself via routerLink. This is to avoid creating some non-standard, one-off utility or a service.
Expected behavior
A router also takes a canRender: [] option. If none is provided, it defaults to always render, to ensure backward compatibility.
// app-routing.module.ts
import { Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
component: HomeComponent,
},
{
path: 'account/profile',
component: AccountComponent,
canActivate: [AuthGuardService],
},
{
path: 'account/profile/employee',
component: EmployeeAccountComponent,
canActivate: [AuthGuardService],
canRender: [SupervisorRenderService],
},
{
path: 'login',
component: LoginComponent,
canRender: [UnauthenticatedRenderService],
},
{
path: 'logout',
component: LogoutComponent,
canRender: [AuthenticatedRenderService],
},
{
path: '**',
component: NotfoundComponent,
}
];Minimal reproduction of the problem with instructions
Example for CanRender for AuthenticatedRenderService.
//app/auth/render-guard-service
import { Injectable } from '@angular/core';
import { CanRender, Router } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthenticatedRenderService implements CanRender {
constructor(private router: Router,
private authService: AuthService) {
}
CanRender(options: any): boolean {
//...
return this.authService.isAuthenticated;
}
}<!-- app/login/login.component.html -->
<a class="" [routerLink]="[/login]">Login</a> <!-- Render if unauthenticated -->
<a class="" [routerLink]="[/logout]">Logout</a> <!-- Render if authenticated -->
<!-- all logic in one place, less logic in tempate, cleaner template -->What is the motivation / use case for changing the behavior?
It would be great to put all the route validation/information/title/data in one place. Not showing a sensitive link sometimes may be as important as guarding it. (security via obscurity). It also can help with allowing most of the logic to live in one place. This may result in less code as well as helping with DRY.
Please tell us about your environment:
macOS Sierra, Node v6.6.0, Angular-CLI beta.18, @angular=2.1.0, @router=3.1.0
Activity
un33k commentedon Dec 19, 2016
Adding a link to a similar app as a reference. Not Javascript, but it may be beneficial to have a look at it as a reference.
lacolaco commentedon Dec 30, 2016
I think it can be solved by a directive on links. you can make your ngIf-like directives.
DzmitryShylovich commentedon Mar 24, 2017
@un33k what do you think about #14515 ? will it help to resolve your issue?
un33k commentedon Mar 25, 2017
@DzmitryShylovich #14515 is a very similar feature request.
itrethan commentedon Mar 31, 2017
LGTM, Approval
angular-robot commentedon Jun 4, 2021
Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.
Find more details about Angular's feature request process in our documentation.
angular-robot commentedon Jun 24, 2021
Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.
We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.
You can find more details about the feature request process in our documentation.
angular-automatic-lock-bot commentedon Sep 4, 2021
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.