Logout from Pentaho
To dismiss a valid session in Pentaho, the logout task is required. In this section you will learn how to develop a very basic logout component from scratch.
1. Creating the logout
component
To create a new component into your application, open a terminal and execute the following command from the root of your project.
ng g component logout
This command creates the logout
folder into app
and setup the project to work with it.
2. Adding the logout
component to routing
Of course, you want your new login page to be routed into your application, in this case on /logout
path. To reach that goal, edit the app.module.ts
file into the src/app
path and the following routing.
const appRoutes: Routes = [
...,
{ path: 'logout', component: LogoutComponent }
];
3. Adding the new page to the main menu
In our basic case the main menu is defined directly into the app.component.html
file into the src/app
folder. To add the link, edit the html file and add the following source code in the menu area.
...<br/>
<a routerLink="/logout">Logout</a>
4. Developing the LogoutComponent
Once done, it's time to develop the logout component.
4.1. Developing the HTML
Edit the logout.component.html
file into src/app/logout
folder, as following.
<p>{{logoutMessage}}</p>
To make the login form more "sexy", feel free to use a different HTML.
4.2. Developing the Typescript
Edit the logout.component.ts
file into src/app/login
folder, as following.
import { PentahoDashboardService } from 'pentaho-dashboard';
...
logoutMessage = '';
constructor(
private pentahoDashboardService: PentahoDashboardService) {
if (this.pentahoDashboardService.isLoggedIn()) {
this.pentahoDashboardService.logOut(null);
this.logoutMessage = 'Logout with success.';
}
else {
this.logoutMessage = 'Not logged in.';
}
}
5. Using the logout
Once done, run the npm start
command from a terminal and open a browser at http://localhost:4200
. Clicking on the Logout
link, this is what you are going to see.