在本節(jié)中,我們將創(chuàng)建一個(gè)登錄和注銷(xiāo)Web應(yīng)用程序。該應(yīng)用程序包括注冊(cè)和登錄表單。在這種集成中,我們使用Spring處理后端部分,使用Angular處理前端部分。
一旦我們?cè)诜?wù)器上部署了應(yīng)用程序,就會(huì)生成一個(gè)歡迎頁(yè)面,其中包含兩個(gè)鏈接-注冊(cè)和登錄。新用戶(hù)可以選擇注冊(cè)并通過(guò)填寫(xiě)所需的詳細(xì)信息進(jìn)行注冊(cè)。但是,現(xiàn)有用戶(hù)可以使用其電子郵件ID和密碼登錄。登錄后,我們可以獲取現(xiàn)有用戶(hù)的詳細(xì)信息。最后,我們可以通過(guò)單擊注銷(xiāo)鏈接退出當(dāng)前狀態(tài)。
使用任何IDE來(lái)開(kāi)發(fā)Spring和Hibernate項(xiàng)目??赡苁荕yEclipse/Eclipse/Netbeans。在這里,我們正在使用Eclipse。用于數(shù)據(jù)庫(kù)的MySQL。使用任何IDE來(lái)開(kāi)發(fā)Angular項(xiàng)目。它可能是Visual Studio代碼/Sublime。在這里,我們正在使用Visual Studio Code。服務(wù)器: Apache Tomcat/JBoss/Glassfish/Weblogic/Websphere。
在這里,我們正在使用以下技術(shù):
Spring5 Hibernate5 Angular6 MYSQL
讓我們創(chuàng)建數(shù)據(jù)庫(kù) loginlogoutexample 。無(wú)需創(chuàng)建表,因?yàn)镠ibernate會(huì)自動(dòng)創(chuàng)建它。
讓我們看看我們需要遵循的Spring目錄結(jié)構(gòu):

要開(kāi)發(fā)一個(gè)登錄和注銷(xiāo)應(yīng)用程序,請(qǐng)遵循以下步驟: -
將依賴(lài)項(xiàng)添加到pom.xml文件。
<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.nhooo</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>
<!-- Add Jackson for JSON converters -->
<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>
<!-- to compensate for java 9 not including jaxb -->
<dependency>
<groupId>javax.xml.bind</groupId>
<artifactId>jaxb-api</artifactId>
<version>2.3.0</version>
</dependency>
<!-- Web token dependency -->
<dependency>
<groupId>io.jsonwebtoken</groupId>
<artifactId>jjwt</artifactId>
<version>0.9.1</version>
</dependency>
<!-- JUnit dependency -->
<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>創(chuàng)建配置類(lèi)
我們執(zhí)行基于注釋的配置,而不是XML。因此,我們創(chuàng)建兩個(gè)類(lèi)并在其中指定所需的配置。
DemoAppConfig.java
package com.nhooo.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.nhooo.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;
}
// need a helper method
// read environment property and convert to int
private int getIntProperty(String propName) {
String propVal = env.getProperty(propName);
// now convert to int
int intPropVal = Integer.parseInt(propVal);
return intPropVal;
}
@Bean
public LocalSessionFactoryBean sessionFactory(){
// create session factory
LocalSessionFactoryBean sessionFactory = new LocalSessionFactoryBean();
// set the properties
sessionFactory.setDataSource(myDataSource());
sessionFactory.setPackagesToScan(env.getProperty("hibernate.packagesToScan"));
sessionFactory.setHibernateProperties(getHibernateProperties());
return sessionFactory;
}
@Bean
@Autowired
public HibernateTransactionManager transactionManager(SessionFactory sessionFactory) {
// setup transaction manager based on session factory
HibernateTransactionManager txManager = new HibernateTransactionManager();
txManager.setSessionFactory(sessionFactory);
return txManager;
}
}MySpringMvcDispatcherServletInitializer.java
package com.nhooo.LoginLogoutExample.config;
import org.springframework.web.servlet.support.AbstractAnnotationConfigDispatcherServletInitializer;
public class MySpringMvcDispatcherServletInitializer extends AbstractAnnotationConfigDispatcherServletInitializer {
@Override
protected Class<?>[] getRootConfigClasses() {
// TOdo Auto-generated method stub
return null;
}
@Override
protected Class<?>[] getServletConfigClasses() {
return new Class[] { DemoAppConfig.class };
}
@Override
protected String[] getServletMappings() {
return new String[] { "/" };
}
}創(chuàng)建實(shí)體類(lèi)
在這里,我們將創(chuàng)建以下實(shí)體類(lèi): AdminDetail.java-這是一個(gè)Entity/POJO(普通的舊Java對(duì)象)類(lèi)。 Token.java-用于身份驗(yàn)證。
AdminDetail.java
package com.nhooo.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="password")
public String password;
@Column(name="role")
public String role;
public AdminDetail() { }
public AdminDetail(int adminID, String emailId, String name, String password, String role) {
super();
this.adminID = adminID;
this.emailId = emailId;
this.name = name;
this.password = password;
this.role = 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 getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getRole() {
return role;
}
public void setRole(String role) {
this.role = role;
}
@Override
public String toString() {
return "AdminDetail [adminID=" + adminID + ", emailId=" + emailId + ", name=" + name + ", password=" + password
+ ", role=" + role + "]";
}
}Token.java
package com.nhooo.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 + "]";
}
}創(chuàng)建DAO接口
在這里,我們將創(chuàng)建兩個(gè)DAO接口以執(zhí)行與數(shù)據(jù)庫(kù)相關(guān)的操作。
AdminDAO.java
package com.nhooo.LoginLogoutExample.DAO.interfaces;
import java.util.List;
import com.nhooo.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.nhooo.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);
}創(chuàng)建DAO接口實(shí)現(xiàn)類(lèi)
AdminDAOImpl.java
package com.nhooo.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.nhooo.LoginLogoutExample.DAO.interfaces.AdminDAO;
import com.nhooo.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("Excecption 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("Excecption 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("Excecption while saving admin Details : " + exception.getMessage());
return null;
}
finally
{
session.flush();
}
}
}TokenDAOImpl.java
package com.nhooo.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.nhooo.LoginLogoutExample.DAO.interfaces.TokenDAO;
import com.nhooo.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();
}
}
}創(chuàng)建服務(wù)層接口
在這里,我們正在創(chuàng)建充當(dāng)DAO和Entity類(lèi)之間橋梁的服務(wù)層接口。
AdminService.java
package com.nhooo.LoginLogoutExample.service.interfaces;
import java.util.List;
import com.nhooo.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.nhooo.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);
}創(chuàng)建服務(wù)層實(shí)現(xiàn)類(lèi)
AdminServiceImpl.java
package com.nhooo.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.nhooo.LoginLogoutExample.DAO.interfaces.AdminDAO;
import com.nhooo.LoginLogoutExample.entity.AdminDetail;
import com.nhooo.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.nhooo.LoginLogoutExample.service.implementation;
import javax.transaction.Transactional;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.nhooo.LoginLogoutExample.DAO.interfaces.TokenDAO;
import com.nhooo.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);
}
}創(chuàng)建令牌類(lèi)
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) {
//The JWT signature algorithm we will be using to sign the token
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.parseBase64Binary(secretKey);
Key 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);
//if it has been specified, let's add the expiration
if (ttlMillis >= 0) {
long expMillis = nowMillis + ttlMillis;
Date exp = new Date(expMillis);
builder.setExpiration(exp);
}
String[] tokenInfo = {builder.compact() , secretKey};
return tokenInfo;
}
}創(chuàng)建控制器類(lèi)
AdminController.java
package com.nhooo.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.nhooo.LoginLogoutExample.entity.AdminDetail;
import com.nhooo.LoginLogoutExample.service.interfaces.AdminService;
import com.nhooo.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;
// Authenticate User.
status = adminService.adminLogin(adminDetail.getEmailId(), adminDetail.getPassword());
/*
* if User is authenticated then do Authorization Task.
*/
if (status > 0)
{
/*
* Generate token.
*/
String tokenData[] = generateToken.createJWT(adminDetail.getEmailId(), "Nhooo", "JWT Token",
adminDetail.getRole(), 43200000);
// get Token.
String token = tokenData[0];
System.out.println("Authorization :: " + token);
// Create the Header Object
httpHeader = new HttpHeaders();
// Add token to the Header.
httpHeader.add("Authorization", token);
// Check if token is already exist.
long isUserEmailExists = tokenService.getTokenDetail(adminDetail.getEmailId());
/*
* if token exist then update Token else create and insert the 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);
}
// if not authenticated return status what we get.
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;
}
}
}創(chuàng)建屬性文件
在這里,我們正在項(xiàng)目的 src/main/resources 中創(chuàng)建屬性文件。以下文件包含休眠連接配置。
persistence-mysql.properties
## JDBC connection properties# jdbc.driver=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://localhost:3306/loginlogoutexample?useSSL=false jdbc.user=root jdbc.password= ## Connection pool properties# connection.pool.initialPoolSize=5 connection.pool.minPoolSize=5 connection.pool.maxPoolSize=20 connection.pool.maxIdleTime=3000 ## Hibernate properties# <!-- hibernate.dialect=org.hibernate.dialect.MySQLDialect --> hibernate.dialect=org.hibernate.dialect.MySQL5Dialect hibernate.show_sql=true hibernate.format_sql=true hibernate.hbm2ddl=update hibernate.packagesToScan=com.nhooo.LoginLogoutExample.entity
讓我們看看Angular的目錄結(jié)構(gòu):
創(chuàng)建一個(gè)Angular項(xiàng)目
讓我們使用以下命令創(chuàng)建Angular項(xiàng)目:
在這里,LoginLogoutExample是名稱(chēng)
使用以下命令在項(xiàng)目中安裝Bootstrap。
npm install bootstrap @ 3.3.7 --save
現(xiàn)在,在style.css文件中包含以下代碼。
@import "~bootstrap/dist/css/bootstrap.css";
生成組件
在Visual Studio中打開(kāi)項(xiàng)目,然后使用以下命令生成以下Angular組件:
ng gc主頁(yè)
ng gc登錄
ng gc注冊(cè)
ng gc配置文件 

我們還使用以下命令創(chuàng)建服務(wù)類(lèi): -
ng gs services/Admin
編輯 app.module.ts 文件 實(shí)施路由-在這里,我們要導(dǎo)入 @ angular/router 包中的 RouterModule ,并在導(dǎo)入數(shù)組中定義路徑。 導(dǎo)入ReactiveFormsModule -在這里,我們將導(dǎo)入 ReactiveFormsModule 用于反應(yīng)形式,并在imports數(shù)組中指定它。 導(dǎo)入HttpModule -在這里,我們?yōu)榉?wù)器請(qǐng)求導(dǎo)入 HttpModule ,并在import數(shù)組中指定它。 注冊(cè)服務(wù)類(lèi)-在這里,我們?cè)谔峁┱邤?shù)組中提到了服務(wù)類(lèi)。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// 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 { }編輯 app.component.html 文件
<router-outlet></router-outlet>
編輯 home.component.html 文件
這是應(yīng)用程序的歡迎頁(yè)面,其中包括兩個(gè)鏈接-"注冊(cè)"和"登錄"。
<div style="text-align: center"> <h2> <a [routerLink]="['/signup']">SignUp</a> <br><br> </h2> <h2> <a [routerLink]="['/login']">Login</a> <br><br> </h2> </div>
創(chuàng)建 AdminDetail.ts 類(lèi)
讓我們使用以下命令創(chuàng)建一個(gè)類(lèi): -

現(xiàn)在,在 AdminDetail 類(lèi)中指定必填字段。
export class AdminDetail {
emailId : string;
name : string;
password : string ;
role : string;
}此類(lèi)的目的是將指定的字段與Spring實(shí)體類(lèi)的字段進(jìn)行映射。
編輯 admin.service.ts 文件
import { Injectable } from '@angular/core';
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 {
// Base 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()
{
// Remove the token from the localStorage.
localStorage.removeItem('token');
this.router.navigate(['']);
}
/*
* Check whether User is loggedIn or not.
*/
isLoggedIn() {
// create an instance of JwtHelper class.
let jwtHelper = new JwtHelperService();
// get the token from the localStorage as we have to work on this token.
let token = localStorage.getItem('token');
// check whether if token have something or it is null.
if(!token)
{
return false;
}
// get the Expiration date of the token by calling getTokenExpirationDate(String) method of JwtHelper class. this method accepts a string value which is nothing but a token.
if(token)
{
let expirationDate = jwtHelper.getTokenExpirationDate(token);
// check whether the token is expired or not by calling isTokenExpired() method of JwtHelper class.
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 object of RequestOptions and include that in it.
let options = new RequestOptions( { headers : headers } );
return this.http.get(url , options);
}
}編輯 signup.component.ts 文件
import { Component, OnInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { AdminDetail } from '../classes/admin-detail';
import { AdminService } from '../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');
}
get Email(){
return this.form.get('email');
}
get Password(){
return this.form.get('password');
}
get ConfirmPassword(){
return this.form.get('confirmPassword');
}
get Role(){
return this.form.get('role');
}
}編輯 signup.component.html 文件
<h2>SignUp form</h2> <form [formGroup]="form" #AdminInformation (ngSubmit)="AdminForm(AdminInformation)"> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="fullName"> Name </label> <input formControlName="fullName" class="form-control" type="text"> </div> </div> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="email"> Email </label> <input formControlName="email" class="form-control" type="text"> </div> </div> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="password"> Password </label> <input formControlName="password" class="form-control" type="password"> </div> </div> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="confirmPassword"> Confirm Password </label> <input formControlName="confirmPassword" class="form-control" type="password"> </div> </div> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="role"> Role </label> <input formControlName="role" class="form-control" type="text"> </div> </div> <div class="row" style="margin-top: 40px;"> <div class="col-md-offset-1 col-md-4"> <button class="btn btn-md btn-primary btn-style" >Save</button> </div> </div> </form>
編輯 login.component.ts 文件
import { Component, OnInit } from '@angular/core';
import { FormGroup, Validators, FormControl } from '@angular/forms';
import { AdminDetail } from '../classes/admin-detail';
import { AdminService } from '../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)
{
alert("please register before login Or Invalid combination of Email and password");
}
},
error => {
console.log("Error in authentication");
}
);
}
get Email(){
return this.form.get('email');
}
get Password(){
return this.form.get('password');
}
}編輯 login.component.html 文件
<h2>Login form</h2> <form [formGroup]="form" #LoginInformation (ngSubmit)="Login(LoginInformation)"> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="email"> Email </label> <input formControlName="email" class="form-control" type="text"> </div> </div> <div class="row"> <div class=" col-md-offset-1 col-md-4"> <label for="password"> Password </label> <input formControlName="password" class="form-control" type="password"> </div> </div> <div class="row" style="margin-top: 40px;"> <div class="col-md-offset-1 col-md-4"> <button class="btn btn-md btn-primary btn-style" >Login</button> </div> </div> </form>
編輯 profile.component.ts 文件
用戶(hù)登錄后,它將重定向到配置文件組件。
import { Component, OnInit } from '@angular/core';
import { AdminService } from '../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("error while getting Admin Data");
}
);
}
}編輯 profile.component.html 文件
<div style="text-align: right ; margin-right: 40px;">
<h2> <a (click)= "adminService.logout()">Logout</a> <br> </h2>
</div>
<div style="text-align: center ; margin-right: 40px;">
<h2> <a (click)="getAdminData()" >Get Admin Details</a> <br> </h2>
</div>
<div *ngIf="haveData > 0 && dataRequest">
<table class="table table-responsive table-striped">
<tr>
<th>Email ID</th>
<th>Name</th>
<th>Password</th>
<th>Role</th>
</tr>
<ng-container *ngfor = "let item of data">
<tr>
<td>{{item.emailId}}</td>
<td>{{item.name}}</td>
<td>{{item.password}}</td>
<td>{{item.role}}</td>
</tr>
</ng-container>
</table>
</div>
<div *ngIf="haveData == 0 && dataRequest">
Don't have Data.
</div>用戶(hù)可以通過(guò)單擊獲取管理員詳細(xì)信息鏈接來(lái)獲取管理員詳細(xì)信息。

現(xiàn)在,用戶(hù)可以通過(guò)單擊注銷(xiāo)退出當(dāng)前狀態(tài)。