1

我是 Angular 的新手。我被困在登录部分。使用 json 在 loginUser() 中编码什么？请帮我。

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>

注册组件.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>

我想使用已经创建的 json 登录并重定向到用户配置文件。

登录组件.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(){

  }

如何在 Angular 5 中使用 json-server 登录？

4

1 回答 1

0

使用适当的身份验证登录应用程序是任何应用程序的关键部分。您可以使用多种可用的方式以 Angular 方式执行身份验证。最简单的方法之一是使用基于 JWT 的 Auth0 身份验证。为此，如果执行此身份验证，您将必须创建一个后端服务器。

您可以使用以下示例作为参考：

//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;
            });
}

对于服务器端身份验证，您必须创建一个名为“server”的不同模块，您可以在其中使用 index.js，如下所示：

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");

您可以使用以下 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"
  }
}

您的服务器文件夹将如下所示： 在此处输入图像描述

完成此操作后，从终端执行服务器为：node index.js

于 2018-02-20T07:21:12.800 回答