You don’t want to show all possible errors to your users before any interaction happened! The form elements itself are not very special, but for each field we can check if it was touched or dirty, which basically means the user has interacted with the field. We have prepared the form code, now we just need an according view around it. I’ve added some default values, which are the combination for a successful login request – change them and the request will fail ( you hear that Galadriel voice?)! When we request a token after login, we will store it locally ( with a bit of RxJS fun since Storage returns a Promise and we need an Observable) and also set the new value to our behaviour subject.Īfter that, everyone calling the subject would get the latest value, which is true after a login and set back to false in the case of a logout.Ĭontinue with the src/app/services/ and change it to: Therefore, we can later easily filter out this value in the guard so users can directly access pages of our app if they were previously authenticated. Our service will also hold a BehaviorSubject, which we initialise with null in the beginning for a reason: Our guard will later catch this very first value, which doesn’t indicate a lot about the authentication state of a user. If you are building a real app check out Practical Ionic, my book to help you build more complex apps! Usually you would plug in your own API, but by doing it like this we can actually replicate a real world scenario pretty accurate. Now on to the login, which will use a dummy implementation for retrieving a token. If you reload the app at that point, the introduction won’t be shown again since the guard evaluates that we’ve already seen the intro. Now you can server your app and the first thing you should see is the introduction, which at the end guides you to the login. Go ahead now and change the src/app/guards/ to: This API only allows to store arbitrary strings, but that’s fine for us. The guard will make use of the Capacitor Storage plugin to check for a certain key, which is actually a string and not a boolean. But since the login is the very first page that would be shown when the app is opened on a device, this is the place where it really makes sense. Within our routing we have only added this guard to the login page, but of course it could be added to other pages as well. Otherwise, the guard will return true and the page the user wanted to access will be shown as usual. Therefore the idea is to use a guard that checks if we’ve already seen the tutorial and shows it if not. Of course we could also make the tutorial page simply the first page, but usually you don’t want to bore your users more often than necessary with this page. We’ll see how each of the different guards work along the tutorial, for now we start with the introduction logic. We can use multiple guards for a page, and we use canLoad instead of canActivate since this will protect the whole lazy loaded module and not even load the file if the user is not allowed to access a path!īy securing the /tabs path at the top level, we also automatically secure every other path and page that you might later add to your tabs routing, since the guard will always be applied in that case.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |