The Author Online Book Forums are Moving

The Author Online Book Forums will soon redirect to Manning's liveBook and liveVideo. All book forum content will migrate to liveBook's discussion forum and all video forum content will migrate to liveVideo. Log in to liveBook or liveVideo with your Manning credentials to join the discussion!

Thank you for your engagement in the AoF over the years! We look forward to offering you a more enhanced forum experience.

392052 (3) [Avatar] Offline
#1
Hi,

Do you have plans to write about how to secure routes with Angular 2? (something beside just using @CanActivate). I am starting an Angular2 app and finding information about how to secure routes is quite difficult... I'd be willing to buy the book just for this smilie I find it very odd that Angular is targeting the kind of apps that are usually behind a login, but there's hardly any info on this out there.

Thanks.
jeremy.wilken (208) [Avatar] Offline
#2
Great request and we haven't started on the routing chapter yet. However, I'll keep this in mind as something we can build as part of the chapter examples.

Jeremy
392052 (3) [Avatar] Offline
#3
Thoughts on what it should cover:

1. On a 401 from the server it should redirect me to a "login" route (or not -- I may want to stay on the same route and show a pop-up)
2. How would I access a "Auth" service from this "router filter" (or whatever ends up being)? Injecting services into CanActivate is "tricky".
3. How would I easily configure permissions per route? For example, I want "/secret" to be accessible to users with roles "admin" or "it" (but nothing else). How can I easily specify a list of roles (accessible from this route filter) at a component or (even better) route level.

Other topics that I would find helpful:

1. How would I centralize error reporting? I don't want to catch every error on an API call. Currently I have a wrapper around Http, but since I'm using Observable(s) the error flows outside of this wrapper. How could I centralize this and show any possible error in a pre-defined UI element (think how GMail has the yellow bar at the top)?
2. Similarly, how would I centralize validation?

So... when is it going to be out?

Thanks
jeremy.wilken (208) [Avatar] Offline
#4
Great questions, and we'll keep those in mind. I don't have a date when routing will be available, but the Router has gone through several iterations (even very recently) so we were reluctant to write about it until it was ready. Also, based on the questions you pose it might also be prudent to leverage the server side rendering capabilities, though again those are not ready and hard to write about just yet. However, the idea is to secure things on the server, and deliver only the parts of the application that a user is allowed to use.

Also, what do you mean by 'centralize validation'?
392052 (3) [Avatar] Offline
#5
Of course, the server is the primary "verification" point, but we'd also need to duplicate some of that for UI purposes. I understand that the router is still changing (and parts of it I don't think are yet implemented) -- I suppose it's the price for being on the cutting edge.

Centralized validation: I haven't looked closely to validation, so it may already be there right now. Imagine 100 forms each with 5 or more fields. To speed up writing all those forms, there should be as little code duplication as possible. In an ideal world I'd just write: <form-element name="customer.Name" /> (customizable component?) inside a form and it would wire up everything for that element (html, binding, outputting validation).

Then you have the problem of showing "per form" validation. For example, you submitted the form, but the action could not complete because of some server-side validation (not tied to any specific element). How do you show that in a "centralized" way, i.e. I don't want to wire up the returned json from the server for every single form -- there should be one central function I could call for every form.

I know, it's a bit vague; mostly because I don't have much experience with Angular yet. I'm mostly speaking about the examples I saw in other (unfinished) Angular 2 books. What should help you thinking is "do I really want to type this 500 times" (basically what's the DRYest way possible).

Thanks.
jeremy.wilken (208) [Avatar] Offline
#6
Thanks, that is helpful context to what you are looking for. As far as authorization, yes we'll work up some content around securing client routes. The server aspect of authorization is that you can also determine what code to send to the client, so if a user can't access the /admin page, you could have the server exclude that from the payload. That is a more advanced and challenging topic and depends on the scope of the server side rendering capabilities how that might be accomplished.

The validation question makes more sense, though I suspect that you're really looking for a complete form library (which Angular does not provide). Angular Formly is a good ng1 form tool that can help normalize forms, and perhaps there will be something similar for Angular 2. At this point, I cannot commit to exactly the depth we can go here, but we will certainly be covering validation and DRY is always good so hopefully we can provide some insights that will get to the heart of the matter.

Jeremy