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

微扬嘴角

已于 2022-06-15 17:21:46 修改

阅读量6.7k

点赞数 12

文章标签： vue.js javascript 前端

于 2022-06-13 22:14:21 首次发布

本文链接：https://blog.csdn.net/qq_51476492/article/details/125261162

版权

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