TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Dev Teywa
NA
250
40.1k
how to verify if user is authenticated using angular2
Jan 25 2018 5:28 AM
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
Reply
Answers (
2
)
how to compare values using angular...
how to declare a string array in the class using typescript