English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
In diesem Abschnitt erstellen wir eine Anmelde- und Abmelde-Webanwendung. Diese Anwendung umfasst eine Registrierungs- und Anmeldeformular. In dieser Integration verwenden wir Spring für den Backend-Teil und Angular für den Frontend-Teil.
Nachdem wir die Anwendung auf dem Server bereitgestellt haben, wird eine Willkommensseite mit zwei Links generiert-Registrierung und Anmeldung.Neue Benutzer können sich registrieren und sich durch Ausfüllen der erforderlichen Details registrieren.Bestehende Benutzer können jedoch mit ihrer E-Mail-ID und ihrem Passwort anmelden.Nach der Anmeldung können wir die Details des bestehenden Benutzers erhalten.Schließlich können wir durch Klicken auf den Abmelde-Link den aktuellen Zustand verlassen.
Verwenden Sie jede IDE, um Spring- und Hibernate-Projekte zu entwickeln. Es könnte MyEclipse sein/Eclipse/Netbeans. Hier verwenden wir Eclipse.Datenbank MySQL.Verwenden Sie jede IDE, um ein Angular-Projekt zu entwickeln. Es könnte Visual Studio Code sein/Sublime. Hier verwenden wir Visual Studio Code.Server: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere.
Hier verwenden wir die folgenden Technologien:
Spring5 Hibernate5 Angular6 MYSQL
Lassen Sie uns die Datenbank erstellen loginlogoutexample 。Tabelle erstellen ist nicht erforderlich, da Hibernate es automatisch erstellt.
Lassen Sie uns schauen, welche Spring-Verzeichnisstruktur wir befolgen müssen:
Um eine Anmelde- und Abmeldeanwendung zu entwickeln, befolgen Sie die folgenden Schritte: -
Fügen Sie die Abhängigkeiten zur Datei pom.xml hinzu.
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>com.w3codebox/groupId> <artifactId>LoginLogoutExample/artifactId> <packaging>war</packaging> <version>0.0.1-SNAPSHOT</version> <name>LoginLogoutExample Maven Webapp/name> <url>http://maven.apache.org/url> <properties> <springframework.version>5.0.6.RELEASE</springframework.version> <hibernate.version>5.2.16.Final</hibernate.version> <mysql.connector.version>5.1.45</mysql.connector.version> <c3po.version>0.9.5.2</c3po.version> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> </properties> <dependencies> <!-- Spring --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-webmvc</artifactId> <version>${springframework.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-tx</artifactId> <version>${springframework.version}</version> </dependency> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-orm</artifactId> <version>${springframework.version}</version> </dependency> <!-- Fügen Sie Jackson für JSON Konverter hinzu --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.5</version> </dependency> <!-- Hibernate --> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-core</artifactId> <version>${hibernate.version}</version> </dependency> <!-- MySQL --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql.connector.version}</version> </dependency> <!-- C3PO --> <dependency> <groupId>com.mchange</groupId> <artifactId>c3p0</artifactId> <version>${c3po.version}</version> </dependency> <!-- Servlet+JSP+JSTL --> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>3.1.0</version> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>javax.servlet.jsp-api</artifactId> <version>2.3.1</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <!-- um java 9 nicht einschließlich jaxb --> <dependency> <groupId>javax.xml.bind</groupId> <artifactId>jaxb-api</artifactId> <version>2.3.0</version> </dependency> <!-- Web Token Abhängigkeit --> <dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.9.1</version> </dependency> <!-- JUnit Abhängigkeit --> <dependency> <groupId>junit</groupId> <artifactId>junit</artifactId> <version>3.8.1</version> <scope>test</scope> </dependency> <!-- https://mvnrepository.com/artifact/org.apache.commons/commons-dbcp2 --> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-dbcp2</artifactId> <version>2.0</version> </dependency> </dependencies> <build> <finalName>LoginLogoutExample</finalName> </build> </project>
Erstellen Sie die Konfigurationsklasse
Wir führen eine auf Kommentaren basierende Konfiguration aus, anstatt XML. Daher erstellen wir zwei Klassen und spezifizieren darin die erforderlichen Einstellungen.
DemoAppConfig.java
package com.w3codebox.LoginLogoutExample.config; import java.beans.PropertyVetoException; import java.util.Properties; import javax.sql.DataSource; import org.hibernate.SessionFactory; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.context.annotation.PropertySource; import org.springframework.core.env.Environment; import org.springframework.orm.hibernate5.HibernateTransactionManager; import org.springframework.orm.hibernate5.LocalSessionFactoryBean; import org.springframework.transaction.annotation.EnableTransactionManagement; import org.springframework.web.servlet.config.annotation.EnableWebMvc; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import com.mchange.v2.c3p0.ComboPooledDataSource; @Configuration @EnableWebMvc @EnableTransactionManagement @ComponentScan("com.w3codebox.LoginLogoutExample") @PropertySource(value = { "classpath:persistence-mysql.properties" }) @PropertySource(value = { "classpath:persistence-mysql.properties" }) @PropertySource(value = { "classpath:application.properties" }) public class DemoAppConfig implements WebMvcConfigurer { @Autowired private Environment env; @Bean public DataSource myDataSource() { // create connection pool ComboPooledDataSource myDataSource = new ComboPooledDataSource(); // set the jdbc driver try { myDataSource.setDriverClass("com.mysql.jdbc.Driver"); } catch (PropertyVetoException exc) { throw new RuntimeException(exc); } // set database connection props myDataSource.setJdbcUrl(env.getProperty("jdbc.url")); myDataSource.setUser(env.getProperty("jdbc.user")); myDataSource.setPassword(env.getProperty("jdbc.password")); // set connection pool props myDataSource.setInitialPoolSize(getIntProperty("connection.pool.initialPoolSize")); myDataSource.setMinPoolSize(getIntProperty("connection.pool.minPoolSize")); myDataSource.setMaxPoolSize(getIntProperty("connection.pool.maxPoolSize")); myDataSource.setMaxIdleTime(getIntProperty("connection.pool.maxIdleTime")); return myDataSource; } private Properties getHibernateProperties() { // set Hibernate properties Properties props = new Properties(); props.setProperty("hibernate.dialect", env.getProperty("hibernate.dialect")); props.setProperty("hibernate.show_sql", env.getProperty("hibernate.show_sql")); props.setProperty("hibernate.format_sql", env.getProperty("hibernate.format_sql")); props.setProperty("hibernate.hbm2ddl.auto", env.getProperty("hibernate.hbm2ddl")); return props; } // benötige ein Hilfsverfahren // lesen Sie das Umgebungsproperty und wandeln Sie es in int um private int getIntProperty(String propName) { String propVal = env.getProperty(propName); // jetzt in int umwandeln int intPropVal = Integer.parseInt(propVal); return intPropVal; } @Bean public LocalSessionFactoryBean sessionFactory(){ // erstelle SessionFactory LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean(); // setze die Eigenschaften sessionFactory.setDataSource(myDataSource()); sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan")); sessionFactory.setHibernateProperties(getHibernateProperties()); return sessionFactory; } @Bean @Autowired public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) { // 基于session factory设置事务管理器 HibernateTransactionManager txManager = new HibernateTransactionManager(); txManager.setSessionFactory(sessionFactory); return txManager; } }
MySpringMvcDispatcherServletInitializer.java
package com.w3codebox.LoginLogoutExample.config; import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer; public class MySpringMvcDispatcherServletInitializer extends AbstractAnnotationConfigDispatcherServletInitializer { @Override protected Class<?>[] getRootConfigClasses() { // 待办 自动-生成的方法占位符 return null; } @Override protected Class<?>[] getServletConfigClasses() { return new Class[] { DemoAppConfig.class }; } @Override protected String[] getServletMappings() { return new String[] { "/" }; } }
创建实体类
在这里,我们将创建以下实体类: AdminDetail.java-这是一个Entity/POJO(普通的旧Java对象)类。 Token.java-用于身份验证。
AdminDetail.java
package com.w3codebox.LoginLogoutExample.entity; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table; @Entity @Table(name="admin_detail") public class AdminDetail { @Id @GeneratedValue(strategy=GenerationType.AUTO) @Column(name="admin_id") private int adminID; @Column(name="email_id", unique=true) public String emailId; @Column(name="name") public String name; @Column(name="passwort") public String passwort; @Column(name="rolle") public String rolle; public AdminDetail() { } public AdminDetail(int adminID, String emailId, String name, String passwort, String role) { super(); this.adminID = adminID; this.emailId = emailId; this.name = name; this.passwort = passwort; this.rolle = role; } public int getAdminID() { return adminID; } public void setAdminID(int adminID) { this.adminID = adminID; } public String getEmailId() { return emailId; } public void setEmailId(String emailId) { this.emailId = emailId; } public String getName() { return name; } public void setName(String name) { this.name = name; } public String getPasswort() { return passwort; } public void setPasswort(String passwort) { this.passwort = passwort; } public String getRolle() { return role; } public void setRolle(String role) { this.rolle = role; } @Override public String toString() { return "AdminDetail [adminID=" + adminID + ", emailId=" + emailId + ", name=" + name + ", passwort=" + passwort + ", role=" + rolle + "]"; } }
Token.java
package com.w3codebox.LoginLogoutExample.entity; import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table; @Entity @Table(name="Token") public class Token { @Id @GeneratedValue(strategy=GenerationType.AUTO) @Column(name="token_id") private int tokenID; @Column(name="user_id", unique=true) private int userID; @Column(name="authenticationToken") private String authenticationToken; @Column(name="secretKey") private String secretKey; @Column(name="email_id") private String emailId; public Token() { } public Token(int tokenID, int userID, String authenticationToken, String secretKey, String emailId) { super(); this.tokenID = tokenID; this.userID = userID; this.authenticationToken = authenticationToken; this.secretKey = secretKey; this.emailId = emailId; } public int getTokenID() { return tokenID; } public void setTokenID(int tokenID) { this.tokenID = tokenID; } public int getUserID() { return userID; } public void setUserID(int userID) { this.userID = userID; } public String getAuthenticationToken() { return authenticationToken; } public void setAuthenticationToken(String authenticationToken) { this.authenticationToken = authenticationToken; } public String getSecretKey() { return secretKey; } public void setSecretKey(String secretKey) { this.secretKey = secretKey; } public String getEmailId() { return emailId; } public void setEmailId(String emailId) { this.emailId = emailId; } @Override public String toString() { return "Token [tokenID=" + tokenID + ", userID=" + userID + ", authenticationToken=" + authenticationToken + ", secretKey=" + secretKey + ", emailId=" + emailId + "]"; } }
创建DAO接口
在这里,我们将创建两个DAO接口以执行与数据库相关的操作。
AdminDAO.java
package com.w3codebox.LoginLogoutExample.DAO.interfaces; import java.util.List; import com.w3codebox.LoginLogoutExample.entity.AdminDetail; public interface AdminDAO { public int saveAdminDetail(AdminDetail adminDetail); public int adminLogin(String emailId, String password); public List<AdminDetail> getAdminData(); }
TokenDAO.java
package com.w3codebox.LoginLogoutExample.DAO.interfaces; public interface TokenDAO { public void saveUserEmail(String email, int adminId); public boolean updateToken(String email, String authenticationToken, String secretKey); public int getTokenDetail(String email); public int tokenAuthentication(String token, int emailId); }
创建DAO接口实现类
AdminDAOImpl.java
package com.w3codebox.LoginLogoutExample.DAO.implementation; import java.util.List; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.query.Query; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import com.w3codebox.LoginLogoutExample.DAO.interfaces.AdminDAO; import com.w3codebox.LoginLogoutExample.entity.AdminDetail; @Repository("adminDAO") public class AdminDAOImpl implements AdminDAO { // Autowired SessionFactory Object So that we can get session object used for interaction with Database. @Autowired private SessionFactory sessionFactory; /* * Register Admin Details. */ public int saveAdminDetail(AdminDetail adminDetail) { Session session = null; try { session = sessionFactory.getCurrentSession(); int id = (Integer) session.save(adminDetail); return id; } catch(Exception exception) { System.out.println("Exception while saving admin Details:"); + exception.getMessage()); return 0; } finally { session.flush(); } } public int adminLogin(String emailId, String password) { Session session = null; try { session = sessionFactory.getCurrentSession(); Query query = session.createQuery("from AdminDetail where emailId=:emailId and password=:password"); query.setParameter("emailId", emailId); query.setParameter("password", password); List<AdminDetail> list = query.list(); int size = list.size(); if(size == 1) { return list.get(0).getAdminID(); } else { return -1; } } catch(Exception exception) { System.out.println("Exception while saving admin Details:"); + exception.getMessage()); return 0; } finally { session.flush(); } } public List<AdminDetail> getAdminData() { Session session = null; try { session = sessionFactory.getCurrentSession(); Query<AdminDetail> query = session.createQuery("from AdminDetail"); List<AdminDetail> list = query.list(); if(list.size() > 0) { return list; } else { return null; } } catch(Exception exception) { System.out.println("Exception while saving admin Details:"); + exception.getMessage()); return null; } finally { session.flush(); } } }
TokenDAOImpl.java
package com.w3codebox.LoginLogoutExample.DAO.implementation; import java.util.List; import org.hibernate.Session; import org.hibernate.SessionFactory; import org.hibernate.query.Query; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Repository; import com.w3codebox.LoginLogoutExample.DAO.interfaces.TokenDAO; import com.w3codebox.LoginLogoutExample.entity.Token; @Repository("tokenDAO") public class TokenDAOImpl implements TokenDAO { @Autowired SessionFactory sessionFactory; public void saveUserEmail(String email, int adminId) { Session session = null; try { session = sessionFactory.getCurrentSession(); Token t = new Token(); t.setUserID(adminId); t.setEmailId(email); session.save(t); } catch(Exception exception) { System.out.println("Exception in saving UserEmail In Token Table :: "); + exception.getMessage()); } finally { session.flush(); } } public boolean updateToken(String email, String authenticationToken, String secretKey) { Session session = null; try { session = sessionFactory.getCurrentSession(); Query theQuery = null; theQuery = session.createQuery("Update Token set authenticationToken = :authenticationToken, secretKey = :secretKey where emailId = :userEmail "); theQuery.setParameter("authenticationToken", authenticationToken); theQuery.setParameter("userEmail", email); theQuery.setParameter("secretKey", secretKey); int result = theQuery.executeUpdate(); if(result == 1) { return true; } else { return false; } } catch(Exception exception) { System.out.println("Error while updating token :: "); + exception.getMessage()); return false; } finally { session.flush(); } } public int getTokenDetail(String email) { Session session = null; try { session = sessionFactory.getCurrentSession(); Query<Token> query = session.createQuery("from Token where emailId = :userEmail"); query.setParameter("userEmail", email); List<Token> tokenDetails = query.list(); if(tokenDetails.size() > 0) { return tokenDetails.get(0).getTokenID(); } else { return 0; } } catch(Exception exception) { System.out.println("Exception while getting token ID :: "); + exception.getMessage()); } finally { session.flush(); } return 0; } public int tokenAuthentication(String token, int emailId) { Session session = null; try { session = sessionFactory.getCurrentSession(); Query query = session.createQuery("from Token where userID = :userID and authenticationToken = :token"); query.setParameter("userID", emailId); query.setParameter("token", token); List<Token> tokenDetails = query.list(); if(tokenDetails.size() > 0) { return tokenDetails.get(0).getTokenID(); } else { return 0; } } catch(Exception exception) { System.out.println("Exception while Authenticating token :: ");+ exception); return 0; } finally { session.flush(); } } }
创建服务层接口
在这里,我们正在创建充当DAO和Entity类之间桥梁的服务层接口。
AdminService.java
package com.w3codebox.LoginLogoutExample.service.interfaces; import java.util.List; import com.w3codebox.LoginLogoutExample.entity.AdminDetail; public interface AdminService { public int saveAdminDetail(AdminDetail adminDetail); public int adminLogin(String emailId, String password); public List<AdminDetail> getAdminData(); }
TokenService.java
package com.w3codebox.LoginLogoutExample.service.interfaces; public interface TokenService { public void saveUserEmail(String email, int adminId); public boolean updateToken(String email, String authenticationToken, String secretKey); public int getTokenDetail(String email); public int tokenAuthentication(String token, int emailId); }
创建服务层实现类
AdminServiceImpl.java
package com.w3codebox.LoginLogoutExample.service.implementation; import java.util.List; import javax.transaction.Transactional; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.w3codebox.LoginLogoutExample.DAO.interfaces.AdminDAO; import com.w3codebox.LoginLogoutExample.entity.AdminDetail; import com.w3codebox.LoginLogoutExample.service.interfaces.AdminService; @Service("adminService") public class AdminServiceImpl implements AdminService { @Autowired private AdminDAO adminDAO; @Transactional public int saveAdminDetail(AdminDetail adminDetail) { return adminDAO.saveAdminDetail(adminDetail); } @Transactional public int adminLogin(String emailId, String password) { return adminDAO.adminLogin(emailId, password); } @Transactional public List<AdminDetail> getAdminData() { return adminDAO.getAdminData(); } }
TokenServiceImpl.java
package com.w3codebox.LoginLogoutExample.service.implementation; import javax.transaction.Transactional; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import com.w3codebox.LoginLogoutExample.DAO.interfaces.TokenDAO; import com.w3codebox.LoginLogoutExample.service.interfaces.TokenService; @Service("tokenService") public class TokenServiceImpl implements TokenService { @Autowired private TokenDAO tokenDAO; @Transactional public void saveUserEmail(String email, int adminId) { tokenDAO.saveUserEmail(email, adminId); } @Transactional public boolean updateToken(String email, String authenticationToken, String secretKey) { return tokenDAO.updateToken(email, authenticationToken, secretKey); } @Transactional public int getTokenDetail(String email) { return tokenDAO.getTokenDetail(email); } @Transactional public int tokenAuthentication(String token, int emailId) { return tokenDAO.tokenAuthentication(token, emailId); } }
Tokenerstellungsklasse
GenerateToken.java
package com.javavtpoint.LoginLogoutExample.Token; import javax.crypto.spec.SecretKeySpec; import javax.xml.bind.DatatypeConverter; import java.security.Key; import java.util.Date; import java.util.Random; import io.jsonwebtoken.*; public class GenerateToken { public String[] createJWT(String id, String issuer, String subject, String role, long ttlMillis) { //Das JWT-Signaturalgorithmus, den wir verwenden werden, um das Token zu signieren SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256; long nowMillis = System.currentTimeMillis(); Date now = new Date(nowMillis); Random random = new Random(); String secretKey = id + Integer.toString(random.nextInt(1000)); byte[] apiKeySecretBytes = DatatypeConverter.parseBase64Binär(secretKey); Schlüssel signingKey = null; try{ signingKey = new SecretKeySpec(apiKeySecretBytes, signatureAlgorithm.getJcaName()); } catch(Exception e) { System.out.println("Exception while generating key " + e.getMessage() ); } JwtBuilder builder = Jwts.builder().setId(id) .setIssuedAt(now) .setSubject(subject) .setIssuer(issuer) .setPayload(role) .signWith(signatureAlgorithm, signingKey); //Wenn es spezifiziert wurde, fügen wir das Ablaufdatum hinzu if (ttlMillis >= 0) { long expMillis = nowMillis + ttlMillis; Date exp = new Date(expMillis); builder.setExpiration(exp); } String[] tokenInfo = {builder.compact() , secretKey}; return tokenInfo; } }
Erstellen Sie eine Kontrollklasse
AdminController.java
package com.w3codebox.LoginLogoutExample.restController; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.http.HttpHeaders; import org.springframework.http.HttpStatus; import org.springframework.http.ResponseEntity; import org.springframework.web.bind.annotation.CrossOrigin; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PathVariable; import org.springframework.web.bind.annotation.PostMapping; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestHeader; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import com.w3codebox.LoginLogoutExample.entity.AdminDetail; import com.w3codebox.LoginLogoutExample.service.interfaces.AdminService; import com.w3codebox.LoginLogoutExample.service.interfaces.TokenService; import com.javavtpoint.LoginLogoutExample.Token.GenerateToken; @RestController @RequestMapping("/api") @CrossOrigin(origins = "http://localhost:4200", allowedHeaders = "*", exposedHeaders = "Authorization") public class AdminController { @Autowired private AdminService adminService; @Autowired private TokenService tokenService; GenerateToken generateToken = new GenerateToken(); @PostMapping("/saveAdmin") public int saveAdminDetail(@RequestBody AdminDetail adminDetail) { return adminService.saveAdminDetail(adminDetail); } @PostMapping("/login") public ResponseEntity<Integer> login(@RequestBody AdminDetail adminDetail) { int status; HttpHeaders httpHeader = null; // Authentifizieren Sie den Benutzer. status = adminService.adminLogin(adminDetail.getEmailId(), adminDetail.getPassword()); /* * Wenn der Benutzer authentifiziert ist, führen Sie die Autorisierungsaufgabe aus. */ if (status > 0) { /* * Erstellen Sie das Token. */ String tokenData[] = generateToken.createJWT(adminDetail.getEmailId(), "w3codebox", "JWT Token", adminDetail.getRole(), 43200000); // Holen Sie das Token. String token = tokenData[0]; System.out.println("Authorization :: " + token); // Erstellen Sie das Header-Objekt httpHeader = new HttpHeaders(); // Fügen Sie das Token dem Header hinzu. httpHeader.add("Authorization", token); // Überprüfen Sie, ob das Token bereits existiert. long isUserEmailExists = tokenService.getTokenDetail(adminDetail.getEmailId()); /* * Wenn das Token existiert, aktualisieren Sie das Token,否则创建并插入Token. */ if (isUserEmailExists > 0)} { tokenService.updateToken(adminDetail.getEmailId(), token, tokenData[1]); } else { tokenService.saveUserEmail(adminDetail.getEmailId(), status); tokenService.updateToken(adminDetail.getEmailId(), token, tokenData[1]); } return new ResponseEntity<Integer>(status, httpHeader, HttpStatus.OK); } // Wenn nicht angemeldet, geben Sie das Folgende zurück: status, was wir erhalten. else { return new ResponseEntity<Integer>(status, httpHeader, HttpStatus.OK); } } @GetMapping("/getAdminData/{adminId} public List<AdminDetail> getAdminData(@PathVariable int adminId, @RequestHeader("Authorization") String authorizationToken) { String token[] = authorizationToken.split(" "); int result = tokenService.tokenAuthentication(token[1], adminId); if (result > 0) { return adminService.getAdminData(); } else { return null; } } }
Eigenschaftsdatei erstellen
Hier erstellen wir im Projekt src/main/resources In diesem Verzeichnis werden die Eigenschaftsdateien erstellt. Folgende Dateien enthalten die Konfiguration der ruhelosen Verbindungen.
persistence-mysql.properties
## JDBC-Verbindungseigenschaften # jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/loginlogoutexample?useSSL=false jdbc.user=root jdbc.password= ## Verbindungspool-Eigenschaften # connection.pool.initialPoolSize=5 connection.pool.minPoolSize=5 connection.pool.maxPoolSize=20 connection.pool.maxIdleTime=3000 ## Hibernate-Eigenschaften # <!-- hibernate.dialect=org.hibernate.dialect.MySQLDialect --> hibernate.dialect=org.hibernate.dialect.MySQL5Dialekt hibernate.show_sql=true hibernate.format_sql=true hibernate.hbm2ddl=update hibernate.packagesToScan=com.w3codebox.LoginLogoutExample.entity
Lassen Sie uns die Verzeichnisstruktur von Angular betrachten:
Erstellung eines Angular-Projekts
Lassen Sie uns den folgenden Befehl verwenden, um ein Angular-Projekt zu erstellen:
Hier ist der Name LoginLogoutExample
Verwenden Sie die folgenden Befehle, um Bootstrap in Ihrem Projekt zu installieren.
npm install bootstrap @ 3.3.7 --save
Jetzt enthalten Sie den folgenden Code in der Datei style.css.
@import "~bootstrap/dist/css/bootstrap.css";
Generierung von Komponenten
Öffnen Sie das Projekt in Visual Studio und verwenden Sie die folgenden Befehle, um die folgenden Angular-Komponenten zu generieren:
ng gc Hauptseite
ng gc Anmeldung
ng gc Registrierung
ng gc Konfigurationsdatei
Wir verwenden auch die folgenden Befehle, um Dienstklassen zu erstellen: -
ng gs services/Admin
Bearbeiten app.module.ts Datei Implementierung der Routen-Hier importieren wir @ angular/router im Paket RouterModule und definieren den Pfad im Import-Array. Importieren der ReactiveFormsModule -Hier definieren wir den Import ReactiveFormsModule zur Reaktion auf Formulare und spezifizieren es im imports-Array. Importieren der HttpModule -Hier importieren wir die HttpModule für Server-Anfragen. HttpModule und spezifizieren es im import-Array. Registrierung der Dienstklasse-Hier haben wir im Anbieter-Array die Dienstklasse erwähnt.
import { BrowserModule } from '@angular'/platform-browser'; import { NgModule } from '@angular',/import { Component, OnInit } from '@angular // import Http module import { HttpModule} from '@angular',/http'; // import ReactiveFormsModule for reactive form import { ReactiveFormsModule } from '@angular',/forms'; // import module for Routing. import { RouterModule } from '@angular',/router'; import { AppComponent } from '.',/app.component'; import { LoginComponent } from '.',/login/login.component'; import { HomeComponent } from '.',/home/home.component'; import { SignupComponent } from '.',/signup/signup.component'; import { AdminService } from '.',/services/admin.service'; import { ProfileComponent } from '.',/profile/profile.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, HomeComponent, SignupComponent, ProfileComponent ], imports: [ BrowserModule, ReactiveFormsModule, HttpModule, RouterModule.forRoot([ { path : '', component : HomeComponent }, { path : 'login', component : LoginComponent }, { path : 'signup', component : SignupComponent }, { path: 'profile'/:adminId', component: ProfileComponent } ]) ], providers: [ AdminService ], bootstrap: [AppComponent], } export class AppModule { }
Bearbeiten app.component.html Datei
<router-outlet></router-outlet>
Bearbeiten home.component.html Datei
Dies ist die Willkommensseite der Anwendung, die zwei Links enthält-"Registrierung" und "Anmeldung".
<div style="Text-align: center"> <h2> <a [routerLink]="['/signup']">SignUp</a> <br><br> </h2> <h2> <a [routerLink]="['/login']">Login</a> <br><br> </h2> </div>
Erstellen AdminDetail.ts Klasse
Lassen Sie uns die folgenden Befehle verwenden, um eine Klasse zu erstellen: -
Jetzt, in AdminDetail Notwendige Felder im Klassen definiert.
export class AdminDetail { emailId: string; name: string; password: string; role: string; }
Das Ziel dieses Klassen ist es, die angegebenen Felder mit den Feldern der Spring-Entitätsklasse zu verknüpfen.
Bearbeiten admin.service.ts Datei
import { Injectable } from '@angular/import { Component, OnInit } from '@angular import { Http, RequestOptions, Headers } from '@angular/http'; import { Observable } from 'rxjs'; import { AdminDetail } from ".."/classes/admin-detail'; import { Router } from "@angular"/router'; import { JwtHelperService } from '@auth0/angular-jwt'; @Injectable({ providedIn: 'root' } export class AdminService { // Basis-URL private baseUrl = "http://localhost:8080/LoginLogoutExample/api/";" constructor(private http: Http, private router: Router) { } saveAdminDetails(adminDetail: AdminDetail): Observable<any> { let url = this.baseUrl + "saveAdmin"; return this.http.post(url, adminDetail); } login(adminDetail: AdminDetail): Observable<any> { let url = this.baseUrl + "login"; return this.http.post(url, adminDetail); } logout() { // Entfernen Sie das Token aus dem localStorage. localStorage.removeItem('token'); this.router.navigate(['']); } /* * Überprüfen Sie, ob der Benutzer angemeldet ist oder nicht. */ isLoggedIn() { // Erstellen Sie eine Instanz der JwtHelper-Klasse. let jwtHelper = new JwtHelperService(); // Holen Sie das Token aus dem localStorage, da wir an diesem Token arbeiten müssen. let token = localStorage.getItem('token'); // Überprüfen Sie, ob das Token etwas enthält oder ob es null ist. if(!token) { return false; } // Erhalten Sie das Ablaufdatum des Tokens, indem Sie die Methode getTokenExpirationDate(String) der JwtHelper-Klasse aufrufen. Diese Methode akzeptiert einen String-Wert, der nichts anderes als ein Token ist. if(token) { Setzen Sie expirationDate = jwtHelper.getTokenExpirationDate(token); // Überprüfen Sie, ob das Token abgelaufen ist oder nicht, indem Sie die Methode isTokenExpired() der JwtHelper-Klasse aufrufen. let isExpired = jwtHelper.isTokenExpired(token); return !isExpired; } } getAdminDetail(adminId): Observable<any> { let url = this.baseUrl + "getAdminData/" + adminId; // create an instance of Header object. let headers = new Headers(); // get token from localStorage. let token = localStorage.getItem('token'); // Append Authorization header. headers.append('Authorization', 'Bearer ') + token); // create an object of RequestOptions and include that in it. let options = new RequestOptions({ headers: headers }); return this.http.get(url, options); } }
Bearbeiten signup.component.ts Datei
用户登录后,它将重定向到配置文件组件。/import { Component, OnInit } from '@angular /forms'; import { AdminDetail } from ".."/classes/admin-detail'; import { AdminService } from '../core';/services/admin.service'; import { Router } from "@angular"/router'; @Component({ selector: ''app-signup', templateUrl: './signup.component.html', styleUrls: ['./signup.component.css" } export class SignupComponent implements OnInit { private adminDetail = new AdminDetail(); constructor(private adminService: AdminService, private router: Router) { } ngOnInit() { } // create the form object. form = new FormGroup({ fullName: new FormControl('', Validators.required), email: new FormControl('', Validators.required), password: new FormControl('', Validators.required), confirmPassword: new FormControl('', Validators.required), role: new FormControl('', Validators.required), }); AdminForm(AdminInformation) { let pass = this.Password.value; let confirmPass = this.ConfirmPassword.value; if(pass == confirmPass) { this.adminDetail.name = this.FullName.value; this.adminDetail.emailId = this.Email.value; this.adminDetail.password = this.Password.value; this.adminDetail.role = this.Role.value; this.adminService.saveAdminDetails(this.adminDetail).subscribe( response => { let result = response.json(); if(result > 0) { this.router.navigate(['/login']); } else { alert("error occur while registring User. please try after sometime.") } }, error => { alert("error occur while registring User. please try after sometime.") } ); } else { alert("Password and confirm password not match."); } } get FullName(){ return this.form.get('fullName'); } console.log("Error in authentication"); get Email(){ } return this.form.get('email'); get Password(){ } get ConfirmPassword(){ return this.form.get('confirmPassword'); } get Role(){ return this.form.get('role'); } }
Bearbeiten signup.component.html Datei
<h2>SignUp form</h2> <form [formGroup]="form" #AdminInformation (ngSubmit)="AdminForm(AdminInformation)"> control" type="text"> <div class="row">-col-<div class="col-1 offset-col-4md <label for="fullName"> Name </<label for="password"> Password < <input formControlName="fullName" class="form-<input formControlName="email" class="form </div> </div> control" type="text"> <div class="row">-col-<div class="col-1 offset-col-4md <form [formGroup]="form" #LoginInformation (ngSubmit)="Login(LoginInformation)">/<label for="password"> Password < <label for="email"> Email <-<input formControlName="email" class="form </div> </div> control" type="text"> <div class="row">-col-<div class="col-1 offset-col-4md <div class=" col/<label for="password"> Password < label>-<input formControlName="password" class="form </div> </div> control" type="text"> <div class="row">-col-<div class="col-1 offset-col-4md <label for="confirmPassword"> Confirm Password </<label for="password"> Password < <input formControlName="confirmPassword" class="form-<input formControlName="password" class="form </div> </div> control" type="text"> <div class="row">-col-<div class="col-1 offset-col-4md <label for="role"> Role </<label for="password"> Password < <input formControlName="role" class="form-<input formControlName="email" class="form </div> </div> control" type="password">-<div class="row" style="margin 40px;"> top:-col-<div class="col-1 offset-col-4md ">-<button class="btn btn-md btn-style" >Save</style" >Login< </div> </div> </button>
Bearbeiten login.component.ts Datei
用户登录后,它将重定向到配置文件组件。/import { Component, OnInit } from '@angular import { FormGroup, Validators, FormControl } from "@angular"/forms'; import { AdminDetail } from ".."/classes/admin-detail'; import { AdminService } from '../core';/services/admin.service'; import { Router } from "@angular"/router'; @Component({ selector: ''app-login" templateUrl: './login.component.html" styleUrls: ['./login.component.css" } export class LoginComponent implements OnInit { private adminDetail = new AdminDetail(); constructor(private adminService: AdminService, private router: Router) { } ngOnInit() { if((this.adminService.isLoggedIn()) { this.router.navigate(['/profile', localStorage.getItem('id')]); } else { this.router.navigate(['/login']); } } // create the form object. form = new FormGroup({ email: new FormControl('', Validators.required), password: new FormControl('', Validators.required), }); Login(LoginInformation) { this.adminDetail.emailId = this.Email.value; this.adminDetail.password = this.Password.value; this.adminService.login(this.adminDetail).subscribe( response => { let result = response.json(); if(result > 0) { let token = response.headers.get("Authorization"); localStorage.setItem("token", token); localStorage.setItem("id", result); this.router.navigate(['/profile', result]); } if(result == -1) { )}} } }, error => { alert("please register before login Or Invalid combination of Email and password"); } ); } console.log("Error in authentication"); get Email(){ } return this.form.get('email'); get Password(){ } }
Bearbeiten return this.form.get('password'); Datei
<h2login.component.html/h2> >Login form< control" type="text"> <div class="row">-col-<div class="col-1 offset-col-4md <form [formGroup]="form" #LoginInformation (ngSubmit)="Login(LoginInformation)">/<label for="password"> Password < <label for="email"> Email <-<input formControlName="email" class="form </div> </div> control" type="text"> <div class="row">-col-<div class="col-1 offset-col-4md <div class=" col/<label for="password"> Password < label>-<input formControlName="password" class="form </div> </div> control" type="password">-<div class="row" style="margin 40px;"> top:-col-<div class="col-1 offset-col-4md ">-<button class="btn btn-md btn-primary btn/style" >Login< </div> </div> </button>
Bearbeiten form> Datei
profile.component.ts
用户登录后,它将重定向到配置文件组件。/import { Component, OnInit } from '@angular import { AdminService } from '../core';/services/admin.service'; import { ActivatedRoute, Router } from '@angular/router'; @Component({ selector: ''app-profile',}} templateUrl: './profile.component.html', styleUrls: ['./profile.component.css"] } export class ProfileComponent implements OnInit { private adminId; private haveData = 0; private data = []; private dataRequest = false; constructor(private adminService : AdminService, private route : ActivatedRoute, private router : Router) { } ngOnInit() { if((this.adminService.isLoggedIn()) { this.route.paramMap.subscribe(params => { this.adminId =+ params.get('adminId'); }); } else { this.router.navigate(['/login']); } } getAdminData() { this.haveData = 0; this.dataRequest = true; this.adminService.getAdminDetail(this.adminId).subscribe( response => { let result = response.json(); this.data = result; if(result == " ") { this.haveData = 0; } else { this.haveData = this.haveData + 1; } }, error => { console.log("Fehler beim Abrufen von Admin-Daten"); } ); } }
Bearbeiten profile.component.html Datei
<div style="Text-Ausrichtung: rechts; Abstand-right: 40px;"> <h2"> <a (click)="adminService.logout()">Logout</a> <br> </h2> </div> <div style="Text-Ausrichtung: zentriert; Abstand-right: 40px;"> <h2> <a (click)="getAdminData()" >Admin-Daten erhalten</a>/a> <br> </h2> </div> <div *ngIf="haveData>0&&dataRequest"> <table class="table table-responsive table-striped"> <tr> <th>E-Mail-ID</th>/th> <th>Name</th>/th> <th>Passwort</th>/th> <th>Role</th>/th> </tr> <ng-container *ngfor="let item of data" <tr> <td>{{item.emailId}}</td>/td> <td>{{item.name}}</td>/td> <td>{{item.password}}</td>/td> <td>{{item.role}}</td>/td> </tr> </ng-container> </table> </div> <div *ngIf="haveData==0&&dataRequest"> KeineDatenverfügbar. </div>
Der Benutzer kann durch KlickenAdministratordetails erhaltenVerknüpfung um Administratordetails zu erhalten.
Jetzt kann der Benutzer durch KlickenAbmeldenAbmelden vom aktuellen Zustand.