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.
