How to Login with json-server in Angular 5? - json

Question

I'm newbie in Angular. I am stuck into login section. What to code in loginUser() using json? Please help me.
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule} from '#angular/forms';
import { RouterModule, Routes } from '#angular/router';
import { HttpModule } from '#angular/http';
import { AppComponent } from './app.component';
import { CollapseModule } from 'ngx-bootstrap';
import { HomeComponent } from './component/home/home.component';
import { AboutComponent } from './component/about/about.component';
import { ContactComponent } from './component/contact/contact.component';
import { RegisterComponent } from './component/register/register.component';
import { LoginComponent } from './component/login/login.component';
const appRoutes: Routes = [
{path:'', component:HomeComponent},
{path:'about', component:AboutComponent},
{path:'contact', component:ContactComponent},
{path:'register', component:RegisterComponent},
{path:'login', component:LoginComponent},
];
#NgModule({
declarations: [
AppComponent,
HomeComponent,
AboutComponent,
ContactComponent,
RegisterComponent,
LoginComponent
],
imports: [
BrowserModule,
HttpModule,
FormsModule,
RouterModule.forRoot(appRoutes),
CollapseModule.forRoot(),
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
register.component.html
<div class="col-md-6 col-md-offset-3">
<h2>Register</h2>
<form #userData = "ngForm" (ngSubmit) = "addUser(userData.value)">
<div class="form-group" >
<label for="firstName">First Name</label>
<input type="text" class="form-control" name="firstName" [(ngModel)]="firstName" required />
</div>
<div class="form-group">
<label for="lastName">Last Name</label>
<input type="text" class="form-control" name="lastName" [(ngModel)]="lastName" required />
</div>
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" name="username" [(ngModel)]="username" required />
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="text" class="form-control" name="email" [(ngModel)]="email" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" name="password" [(ngModel)]="password" required />
</div>
<div class="form-group">
<button class="btn btn-primary">Register</button>
<a routerLink="/login" class="btn btn-primary">Login</a>
<a routerLink="/" class="btn btn-link">Cancel</a>
</div>
</form>
</div>
register.component.ts
import { Component, OnInit } from '#angular/core';
import { Http, Response, Headers } from '#angular/http';
import { Router } from '#angular/router';
#Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css']
})
export class RegisterComponent implements OnInit {
constructor(private http: Http, private router: Router) { }
userAddString: string = "User Registered Successfully";
userObj:object = {};
addUser(user){
this.userObj = {
"fname": user.firstName,
"lname": user.lastName,
"email": user.email,
"username": user.username,
"password": user.password
};
this.http.get("http://localhost:4201/users/", this.userObj).subscribe((Response) => {
console.log(this.userObj);
this.router.navigate(['/login']);
})
}
ngOnInit() {
console.log('Register Component Running...');
}
}
login.component.html
<div class="col-md-6 col-md-offset-3">
<h2>Login</h2>
<form #loginData = "ngForm" (ngSubmit) = "loginUser(loginData.value)">
<div class="form-group">
<label for="username">Username</label>
<input type="text" class="form-control" name="username" required />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" name="password" required />
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Login</button>
<!-- <input type="submit" value="Login" /> -->
<a routerLink="/register" class="btn btn-primary">Sign Up</a>
<a routerLink="/" class="btn btn-link">Cancel</a>
</div>
</form>
I want to logged in and redirect to user profile using json already created.
login.component.ts
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { Http, Response, Headers } from '#angular/http';
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
constructor(private router: Router, private http: Http) { }
ngOnInit() {
console.log('login Component Running...');
}
loginUser(){
}
How to Login with json-server in Angular 5?

Answer 1

Logging in application, with proper Authentication, is critical part of any application. You can make use of many ways available to perform Authentication in Angular way. One of the simplest way is to go with JWT based Auth0 authentication.
For this, you will have to create a back-end server where this authentication if performed.
you can make use of following example as your refrence:
//Get Username and Passwerd from the HTML component, as entered by the user
loginUser(){
this.http.post('http://localhost:3001/user/authenticate', { username: username, password: password })
.map((response: Response) => {
let user = response.json();
if (user && user.token) {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('currentUser', JSON.stringify(user));
}
return user;
});
}
For the server side authentication, you have to create a different module named 'server', where you can make use of index.js as below:
var express = require('express');
var app = express();
var jwt = require('express-jwt');
var cors = require('cors');
var jwt1 = require('jsonwebtoken');
var Q = require('q');
var bodyParser = require('body-parser');
app.use(bodyParser.json()); // support json encoded bodies
app.use(bodyParser.urlencoded({ extended: true })); // support encoded bodies
app.use(cors());
app.post('/user/authenticate',function(req, res){
console.log(req.body);
var obj = req.body;
var user= obj.username;
var pwd= obj.password;
var deferred = Q.defer();
if(user=='admin' && pwd== 'admin')
{
// authentication successful
deferred.resolve({
_id: 1001,
username: 'admin',
firstName: 'Admin',
lastName: '----',
password: 'admin',
token: jwt1.sign({ sub: 1001 }, 'admin')})
}else{
// authentication failed
deferred.resolve();
}
deferred.promise.then(function (user) {
if (user) {
// authentication successful
res.send(user);
} else {
// authentication failed
res.status(400).send('Username or password is incorrect');
}}) .catch(function (err) {
res.status(400).send(err);
});
});
app.listen(3001);
console.log("Listening on http://localhost:3001");
You can make use of following package.json:
{
"name": "angular-js-server",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "Rahulk",
"license": "ISC",
"dependencies": {
"#angular/core": "^4.4.6",
"body-parser": "^1.18.2",
"cors": "^2.8.4",
"express": "^4.16.2",
"express-jwt": "^5.3.0",
"jsonwebtoken": "^8.1.0",
"lodash": "^4.17.4",
"q": "^1.5.1"
},
"devDependencies": {
"#angular/cli": "^1.4.9"
}
}
Your server folder will look like follows:
Once done with this, execute server from terminal as: node index.js