vue项目实现登录/退出功能（包括token机制）

源码地址：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.

vue项目实现登录/退出功能（包括token机制）相关推荐

Vue项目二登录注册功能的实现
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.系统注册功能的实现 1.配置注册页面路由 2.注册页面的搭建 3.api下发送ajax请求的文件创建二.后台数据 ...
前端开发Vue项目实战：电商后台管理系统（二）-- 登录退出功能 --主页界面
目录 1. 登录/退出功能 1.1 登录概述 1.2 token 原理分析 1.3 登录功能实现 1.3.1 Git 创建分支 1.3.2 渲染Login组件并实现路由重定向 1.3.3 设置背景颜色 ...
7006.vue电商实战项目2-登录退出功能
学习笔记记录,如有侵权请联系我文章目录 1 登录概述 1.1 登录流程 1.2 登录的业务技术点 2 登录退出功能 2.1 登录token的原理分析 2.2 登录功能 2.2.1 登录页面布局 2. ...
vue +Element-UI 实现完整的登录退出功能
接着上篇文章开始记录,上篇最后问题已经解决,忘记了 : 导致的.已修改完成.截至目前为止,登录退出功能已实现,以下是我的代码: Login.vue <template><div cl ...
Vue项目在页面添加水印功能
Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {}let setWatermark = (str) => {let id = '1.234523 ...
个人博客四|注册登录退出功能后台开发
声明:本博客的注册登录退出功能将使用django-allauth,参考资源如下: django-allauth文档 django-allauth教程 1.安装django-allauth pip in ...
vue项目做微信分享功能
vue项目做微信分享功能安装sdk npm install weixin-js-sdk --save 方法 1.新建js文件wxapi.js 2.在wxapi.js中引入sdk以及配置一些基本信息( ...
【博客项目】—登录验证功能实现（五）
[博客项目]-登录验证功能实现( 五)
Vue项目之登录注册
Vue项目之登录注册 1. 注册 1.1 注册页面的布局 1.2 注册业务逻辑的实现 2. 登录 3.导航守卫 3.1全局导航守卫,全部路由都会经过这里.一定要调用next方法向下执行 3.2 路由独 ...

vue项目实现登录/退出功能（包括token机制）

vue项目实现登录/退出功能（包括token机制）相关推荐

最新文章

热门文章