Tech
Forums
Jobs
Books
Events
Videos
Live
More
Interviews
Certification
Training
Career
Members
News
Blogs
Contribute
An Article
A Blog
A Video
An Ebook
An Interview Question
Register
Login
2
Answers
how to verify if user is authenticated using angular2
Dev Maroua
6y
199
1
Reply
I have a home page and login I want if the user is not logged I redirect him to the login page to authenticat
here is my script
login.component.ts
import { Component } from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
import { Router } from '@angular/router';
import {AuthenticationService,User} from './data.service'
@Component({
selector: 'my-login',
providers: [AuthenticationService],
template: `
<
div
class
=
"container"
>
<
div
class
=
"title"
>
Welcome
div
>
<
div
class
=
"panel-body"
>
<
div
class
=
"row"
>
<
div
class
=
"input-field col s12"
>
<
input
[(ngModel)]="user.email"
id
=
"email"
type
=
"email"
class
=
"validate"
>
<
label
for
=
"email"
>
Email
label
>
div
>
div
>
<
div
class
=
"row"
>
<
div
class
=
"input-field col s12"
>
<
input
[(ngModel)]="user.password"
id
=
"password"
type
=
"password"
class
=
"validate"
>
<
label
for
=
"password"
>
Password
label
>
div
>
div
>
<
span
>
{{errorMsg}}
span
>
<
button
(click)="login()"
class
=
"btn waves-effect waves-light"
type
=
"submit"
name
=
"action"
>
Login
button
>
<
li
class
=
"active"
>
<
a
[routerLink]='["/register"]'
>
Register
a
>
li
>
div
>
div
>
`
})
export class LoginComponent
{
public
user
=
new
User('','');
public
errorMsg
=
''
;
constructor(
private _service:AuthenticationService) {}
ngOnInit()
{
this._service.add_user(this.user);
}
login() {
if(!this._service.login(this.user)){
this.errorMsg
=
'Failed to login'
;
}
}
}
data.service.ts
import {Injectable} from '@angular/core';
import {Router} from '@angular/router';
export class User {
constructor(
public email: string,
public password: string) {
this.email
=email;
this.password
=password}
}
@Injectable()
export class AuthenticationService {
users :User[]= [
new User('
[email protected]
','adm'),
new User('
[email protected]
','a23'),
new User('
[email protected]
','a')
];
constructor(
private _router: Router){}
logout() {
localStorage.removeItem("user");
this._router.navigate(['Login']);
}
login(user :any){
var authenticatedUser
:any
=
this
.users.find(
u
=
>
u.email
=== user.email);
if (authenticatedUser &&
authenticatedUser.password
=== user.password)
{
localStorage.setItem("user", authenticatedUser)
this._router.navigate(['home']);
console.log(this.users)
return true;
}
return false;
}
add_user(usr:User)
{
var authenticatedUser
:any
=
this
.users.push.call(new User(usr.email,usr.password));
localStorage.setItem("usr",authenticatedUser);
this._router.navigate(['login'])
console.log(this.users)
}
checkCredentials(){
if (localStorage.getItem("user") === null){
this._router.navigate(['login']);
}
}
}
home.component.ts
import { Component, OnInit } from '@angular/core';
import {AuthenticationService,User} from './data.service'
@Component({
selector: 'my-home',
providers: [AuthenticationService],
template: `
<
div
class
=
"container"
>
<
div
class
=
"content"
>
<
span
>
Congratulations, you have successfully logged in!!
span
>
<
br
/>
<
a
(click)="logout()"
href
=
"#"
>
Click Here to logout
a
>
div
>
div
>
`
})
export class HomeComponent {
constructor(
private _service:AuthenticationService){}
ngOnInit(){
this._service.checkCredentials();
}
logout() {
this._service.logout();
}
}
and thanks in advance
Post
Reset
Cancel
Answers (
2
)
Next Recommended Forum
how to compare values using angular...
how to declare a string array in the class using typescript