vue项目实现登录/退出功能

一、登录业务的相关技术点
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（注意：这不是最终代码，后面会逐步修改）：

  


    
    


    

    
    

      
      
         
      
      
        
      

      
      
        登录
        重置
      

    

  

效果如下：

五、为登录界面添加一些内在功能
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 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 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类中的响应函数

测试结果如下：


在前端项目中登录成功之后的token保存到客户端的sessionStorage中：

发送一次登录请求后效果如下：

最后使用this.$router.push()实现页面跳转。

7.添加路由导航守卫控制访问权限（用户未登录访问其他页面时跳转到登录页面）

8.退出功能（销毁token）
给退出按钮绑定事件。