源码地址:https://gitee.com/cheng-xuyuan/blogWeb.git(请忽略这句)
一、登录业务的相关技术点
http是无状态的,为记录登录状态可通过cookie-session方式和token方式两种,cookie-session方式适用于不存在跨域问题的前后端分离项目,token方式可适用于存在跨域问题的前后端分离项目。
二、token原理
token值由服务器生成,每个用户的token值不同。
三、登录页面布局
四、界面布局具体步骤
1.在项目的component目录下新建一个login.vue(自定义组件)
2.将该组件注册到路由器(index.js文件)中,注:新建项目index.js在router目录下
说明:以上设置表示在路径后添加"login"时进入登录界面。
先运行已写部分:默认访问项目路由的根路径
改变路径:登录组件显示
也可使用重定向机制使得运行项目默人进入登录界面:
此时运行项目即进入登录界面(显示登录组件)。
3.设置登录组件
补充1:添加的css文件放置在asserts目录下,且在开始文件(index.js)中导入。
补充2:使用element-ui元素时,使用一个,便需要在plugin目录下的element.js文件中导入一个。
如:
使用element-ui的标签与css中常用的标签方法差不多,可以为其设置class属性并用选择器在style标签中设置具体格式,只是有其特有的属性。
具体css格式设置不多表述,直接上代码login.vue(注意:这不是最终代码,后面会逐步修改):
<div class="login">
<div class="login_box">
<!-- 头像区域 -->
<div class="avatar_box">
<img src="../assets/logo.png" alt=""/>
</div>
<!-- 登录表单区域,使用element-ui -->
<el-form label-width="80px" class="form">
<!-- 文本输入框 -->
<el-form-item label="用户名"><!-- 文本输入框前的label -->
<el-input prefix-icon="el-icon-user-solid" class="el-input"></el-input> <!-- 文本输入框,prefix=icon属性设置输入框前的小标签 -->
</el-form-item>
<el-form-item label="密码">
<el-input class="el-input" prefix-icon="el-icon-lock"></el-input>
</el-form-item>
<!-- 按钮区域 -->
<el-form-item class="btn">
<el-button type="primary">登录</el-button>
<el-button type="info">重置</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
name: "login"
}
</script>
<style scoped>
.login {
background-color: #2b4b6b;
height:100%;
}
.login_box{
width: 450px;
height:300px;
background-color: #fff;
border-right: 3px;
position:absolute;
left:50%;
top:50%;
transform: translate(-50%,-50%);
}
.avatar_box{
height: 130px;
width: 130px;
border:1px solid #eee;
border-radius:50%; /*使div框变为圆形 */
box-shadow:0 0 10px #ddd;
position:absolute;
left:50%;
transform:translate(-50%,-50%); /*使元素相对于自己的位置左移和上移自身一般的大小*/
background-color:#eee;
}
img{
width: 100%;
height: 100%;
border-radius:50%;
}
.form{
position:absolute;
top:100px;
width: 450px;
height: 200px;
}
el-input{
width: 200px;
}
</style>
效果如下:
五、为登录界面添加一些内在功能
1.在上述代码的基础上添加数据绑定机制:
在script标签中添加数据loginForm,包含username和password两项数据。
使用":model"为el-form即整个表单绑定data中的数据,使用"v-model"为el-input即输入框绑定数据。
2.为表单提供验证规则(即用户输入错误或为输入时提醒用户):
(1)el-form标签的属性:rule="rules"绑定规则;
(2)在script标签中的data数据中定义规则,可有多个;
(3)el-form-item标签的属性prop来指定一个规则;
例如:
上述username规则的意思是必须输入,提示信息为“输入用户名”,每次光标离开标签后检验一次;password的第二个规则意思是输入字符数量在6-10之间。效果如下:
3.实现重置机制
两步:(1)设置el-form标签的ref属性值,可以通过该属性值获取该标签;
(2)为重置按钮绑定触发事件;
(3)在script标签中注册该触发事件;
这里的this.$refs.loginFormRef获取了el-form标签,而reserFields()函数为element-ui底层已写好的重置表单的函数。
4.发送http请求
参照另一篇博文《vue的axios》
5.登录结果消息提示(使用element-ui)
注意:Message不使用Vue.use(),而是使用全局挂载方式,挂载后所有组件都能使用this.$message。
效果如下:
6.登录成功之后的行为
(1)将登录成功之后的token保存到客户端的sessionStorage中
项目中除了登录之外的其他API接口,必须登录之后才能访问;
token只应在当前网站打开期间生效,所以将token保存在sessionStorage中。
(2)跳转到后台主页,路由地址为/home
先在后端项目中添加token机制(Jwt):
(1)添加依赖
(2)新建一个类JwtUtil
public class JwtUtil {
/**
* 过期5分钟
* */
private static final long EXPIRE_TIME = 5 * 60 * 1000;
/**
* jwt密钥
* */
private static final String SECRET = "jwt_secret";
/**
* 生成jwt字符串,五分钟后过期 JWT(json web token)
* @param userId
* @param info,Map的value只能存放值的类型为:Map,List,Boolean,Integer,Long,Double,String and Date
* @return
* */
public static String sign(String userId, Map<String, Object> info) {
try {
Date date = new Date(System.currentTimeMillis() + EXPIRE_TIME);
Algorithm algorithm = Algorithm.HMAC256(SECRET);
return JWT.create()
//将userId保存到token里面
.withAudience(userId)
//存放自定义数据
.withClaim("info", info)
//五分钟后token过期
.withExpiresAt(date)
//token的密钥
.sign(algorithm);
} catch (Exception e) {
e.printStackTrace();
return null;
}
}
/**
* 根据token获取userId
* @param token
* @return
* */
public static String getUserId(String token) {
try {
String userId = JWT.decode(token).getAudience().get(0);
return userId;
}catch (JWTDecodeException e) {
return null;
}
}
/**
* 根据token获取自定义数据info
* @param token
* @return
* */
public static Map<String, Object> getInfo(String token) {
try {
return JWT.decode(token).getClaim("info").asMap();
}catch (JWTDecodeException e) {
return null;
}
}
/**
* 校验token
* @param token
* @return
* */
public static boolean checkSign(String token) {
try {
Algorithm algorithm = Algorithm.HMAC256(SECRET);
JWTVerifier verifier = JWT.require(algorithm)
//.withClaim("username, username)
.build();
verifier.verify(token);
return true;
}catch (JWTVerificationException e) {
throw new RuntimeException("token 无效,请重新获取");
}
}
}
(3)修改controller类中登录的响应函数
(4)修改UserInterceptor类
测试结果如下:
在前端项目中登录成功之后的token保存到客户端的sessionStorage中:
发送一次登录请求后效果如下:
最后使用this.$router.push()实现页面跳转。
7.添加路由导航守卫控制访问权限(用户未登录访问其他页面时跳转到登录页面)
8.退出功能(销毁token)
给退出按钮绑定事件。
9.设置完token后可以在前端代码中定义拦截器的方法,使得每次前端发请求都会带上token.