The page you are viewing does not exist in version 13.2. This link will take you to the Overview page.
The page you are viewing does not exist in version 13.1. This link will take you to the Overview page.
Logon When Navigating to a View /
« Prev step
Next step »
This tutorial presents an example of how you can implement the 'login' functionality in a DevExtreme application. An application that will be implemented in this tutorial will have one of the root views and one child view secured. When navigating to a secured view, a popup modal view will be invoked. An end user will have to specify login parameters to login and navigate to the target view or cancel navigation.
Use an application project template for your sample application. Leave the Navbar layout set that is used in the application by default and implement the following views.
The 'home' view is included into the application template. This view will be accessible without logging on. Indicate this within the view's content for demo purposes. In addition, add the dxButton widget to allow an end user to navigate to an inner secured view.
Secured Inner View
Add a 'secureInner' view to the application. This is a simple view. Just indicate that this view is secured within the view's content.
Secured Root View
Add a 'secureRoot' view to the application. Indicate that this view is secured within the view's content. In addition, add the dxButton widget to navigate to the inner secured view.
Remove the 'about' view from the application. The views listed above will be enough for the sample.
Specify the navigation option of the HtmlApplication object so that the 'home' and 'secureRoot' view are accessible from the global navigation of the application.
Add a 'login' view to the application.
Implement the view's HTML template.
An end user will enter his/her credentials within this view. So add a field set with the E-mail and Password fields, and two buttons - Log on and Cancel - to this view. Bind the field values as well as the button click actions to the corresponding ViewModel fields - email, password, logIn and close.
Implement a ViewModel for the 'login' view.
Currently, the ViewModel will have the email and passwordobservable fields and the logIn and close fields that are set to empty functions (at this step).
Add links to the files with the view's HTML template and ViewModel object to the application's main page (the index.html file).
Add the Popup Layout to the application, since this layout will be used to display the "login" view as a popup modal view. NOTE: Add links to the Popup Layout after other layout links.
To show the "login" popup view for non-authorized users only, declare a global loggedIn variable within the HtmlApplication.initialized event handler. Set this variable to false by default. This variable will be accessed from any part of the application and you can change its value in the "login" ViewModel.
Since login parameters need not be requested for all application views, and only for the 'secureRoot' and 'secureInner' views, introduce the secure option for the dxView components representing the secured views. Set this option to true.
To display the "login" view when a non-authorized user is navigating to a secured view, handle the HtmlApplication.navigating event. Do the following within the event handler.
Check the secure option of the navigated view.
To get this option value, use the getViewTemplateInfo method of the HtmlApplication object.
If the currently navigated view is secure and the loggedIn global variable is set to false, cancel the current navigation and navigate to the "login" view.
To save the URI of the navigated view as a navigation parameter and then continue navigation to this view when the user is authorized, add a secondary rule for the application's router - "login/:backUri" - and navigate to the "login" view using this rule.
In the logIn function of the "login" view, check the entered login parameters and, if they are valid, set the loggedIn global variable to true and navigate to the target view. The target view is accessible as the *backUri field of the object passed as a parameter of the function returning the ViewModel object.
Implement the close function of the "login" ViewModel. In this function, use the HtmlApplication.back() method to return back to the previous view when a user cancels authorization.