05月26, 2021
0 comments

Vue实战（十三）-- JWT

十三、JWT

什么是JWT

Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准（(RFC 7519).该token被设计为紧凑且安全的，特别适用于分布式站点的单点登录（SSO）场景。JWT的声明一般被用来在身份提供者和服务提供者间传递被认证的用户身份信息，以便于从资源服务器获取资源，也可以增加一些额外的其它业务逻辑所必须的声明信息，该token也可直接被用于认证，也可被加密。

起源

说起JWT，我们应该来谈一谈基于token的认证和传统的session认证的区别。

传统的session认证

我们知道，http协议本身是一种无状态的协议，而这就意味着如果用户向我们的应用提供了用户名和密码来进行用户认证，那么下一次请求时，用户还要再一次进行用户认证才行，因为根据http协议，我们并不能知道是哪个用户发出的请求，所以为了让我们的应用能识别是哪个用户发出的请求，我们只能在服务器存储一份用户登录的信息，这份登录信息会在响应时传递给浏览器，告诉其保存为cookie,以便下次请求时发送给我们的应用，这样我们的应用就能识别请求来自哪个用户了,这就是传统的基于session认证。

但是这种基于session的认证使应用本身很难得到扩展，随着不同客户端用户的增加，独立的服务器已无法承载更多的用户，而这时候基于session认证应用的问题就会暴露出来.

基于session认证所显露的问题

Session: 每个用户经过我们的应用认证之后，我们的应用都要在服务端做一次记录，以方便用户下次请求的鉴别，通常而言session都是保存在内存中，而随着认证用户的增多，服务端的开销会明显增大。

扩展性: 用户认证之后，服务端做认证记录，如果认证的记录被保存在内存中的话，这意味着用户下次请求还必须要请求在这台服务器上,这样才能拿到授权的资源，这样在分布式的应用上，相应的限制了负载均衡器的能力。这也意味着限制了应用的扩展能力。

CSRF: 因为是基于cookie来进行用户识别的, cookie如果被截获，用户就会很容易受到跨站请求伪造的攻击。

基于token的鉴权机制

基于token的鉴权机制类似于http协议也是无状态的，它不需要在服务端去保留用户的认证信息或者会话信息。这就意味着基于token认证机制的应用不需要去考虑用户在哪一台服务器登录了，这就为应用的扩展提供了便利。

流程上是这样的：

  • 用户使用用户名密码来请求服务器
  • 服务器进行验证用户的信息
  • 服务器通过验证发送给用户一个token
  • 客户端存储token，并在每次请求时附送上这个token值
  • 服务端验证token值，并返回数据

这个token必须要在每次请求时传递给服务端，它应该保存在请求头里， 另外，服务端要支持CORS(跨来源资源共享)策略，一般我们在服务端这么做就可以了Access-Control-Allow-Origin: * 。当然，如果前端做了代理的情况下就不需要纠结这些问题

JWT长什么样？

JWT是由三段信息构成的，将这三段信息文本用.链接一起就构成了Jwt字符串。就像这样:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

JWT的构成

第一部分我们称它为头部（header),第二部分我们称其为载荷（payload, 类似于飞机上承载的物品)，第三部分是签证（signature).

header

jwt的头部承载两部分信息：

  • 声明类型，这里是jwt
  • 声明加密的算法 通常直接使用 HMAC SHA256

完整的头部就像下面这样的JSON：

{
  'typ': 'JWT',
  'alg': 'HS256'
}

然后将头部进行base64加密（该加密是可以对称解密的),构成了第一部分.

eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9

playload

载荷就是存放有效信息的地方。这个名字像是特指飞机上承载的货品，这些有效信息包含三个部分

  • 标准中注册的声明
  • 公共的声明
  • 私有的声明

标准中注册的声明 (建议但不强制使用) ：

  • iss: jwt签发者
  • sub: jwt所面向的用户
  • aud: 接收jwt的一方
  • exp: jwt的过期时间，这个过期时间必须要大于签发时间
  • nbf: 定义在什么时间之前，该jwt都是不可用的.
  • iat: jwt的签发时间
  • jti: jwt的唯一身份标识，主要用来作为一次性token,从而回避重放攻击。

公共的声明 ： 公共的声明可以添加任何的信息，一般添加用户的相关信息或其他业务需要的必要信息.但不建议添加敏感信息，因为该部分在客户端可解密.

私有的声明 ： 私有声明是提供者和消费者所共同定义的声明，一般不建议存放敏感信息，因为base64是对称解密的，意味着该部分信息可以归类为明文信息。

定义一个payload:

{
  "sub": "1234567890",
  "name": "John Doe",
  "admin": true
}

然后将其进行base64加密，得到Jwt的第二部分。

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9

signature

jwt的第三部分是一个签证信息，这个签证信息由三部分组成：

  • header (base64后的)
  • payload (base64后的)
  • secret

这个部分需要base64加密后的header和base64加密后的payload使用.连接组成的字符串，然后通过header中声明的加密方式进行加盐secret组合加密，然后就构成了jwt的第三部分。

将这三部分用.连接成一个完整的字符串,构成了最终的jwt:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

注意：secret是保存在服务器端的，jwt的签发生成也是在服务器端的，secret就是用来进行jwt的签发和jwt的验证，所以，它就是你服务端的私钥，在任何场景都不应该流露出去。一旦客户端得知这个secret, 那就意味着客户端是可以自我签发jwt了。

如何应用

一般是在请求头里加入Authorization，并加上Bearer标注：

fetch('api/user/1', {
  headers: {
    'Authorization': 'Bearer ' + token
  }
})

服务端会验证token，如果验证通过就会返回相应的资源。整个流程就是这样的:

示例实战

JWT最重要的是需要在后台封装数据，所以，首先是后台代码

1、javabean对象

首先需要可以用来传值的javabean对象，jwt都是用来登录验证使用，所以这里是登录User对象

User.java

@Data
@EqualsAndHashCode(callSuper = true)
@TableName("t_user")
public class User extends Model implements Serializable {
    private static final long serialVersionUID = 1L;
    @TableId(value = "user_pkid", type = IdType.AUTO)
    private Integer userPkid;
    private String username;
    private String password;
    //...其他代码省略
}

2、导入jwt需要的jar包

<!-- jsonwebtoken -->
<dependency>
    <groupId>io.jsonwebtoken</groupId>
    <artifactId>jjwt</artifactId>
    <version>0.9.1</version>
</dependency>
<dependency>
    <groupId>com.auth0</groupId>
    <artifactId>java-jwt</artifactId>
    <version>3.4.0</version>
</dependency>

注意：如果你使用的是JDK11，那么接下来的代码你在运行的时候可能会报错。

org.springframework.web.util.NestedServletException: 
Handler dispatch failed; 
nested exception is java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter

javax/xml/bind/DatatypeConverter这个类没找到，原因JAXB API是java EE 的API，JDK11删除了这个工具。

因此，如果你使用报错的话，需要自己手动的导入依赖

<!-- jaxb依赖包 -->
<dependency>
    <groupId>javax.xml.bind</groupId>
    <artifactId>jaxb-api</artifactId>
    <version>2.3.0</version>
</dependency>
<dependency>
    <groupId>com.sun.xml.bind</groupId>
    <artifactId>jaxb-impl</artifactId>
    <version>2.3.0</version>
</dependency>
<dependency>
    <groupId>com.sun.xml.bind</groupId>
    <artifactId>jaxb-core</artifactId>
    <version>2.3.0</version>
</dependency>
<dependency>
    <groupId>javax.activation</groupId>
    <artifactId>activation</artifactId>
    <version>1.1.1</version>
</dependency>

3、封装JWTUtil

JwtUtil.java

public class JwtUtil {
    /**
     * 用户登录成功后生成Jwt
     * 使用Hs256算法  私匙使用用户密码
     *
     * @param ttlMillis jwt过期时间
     * @param user      登录成功的user对象
     * @return
     */
    public static String createJWT(long ttlMillis, User user) {
        //指定签名的时候使用的签名算法，也就是header那部分，jjwt已经将这部分内容封装好了。
        SignatureAlgorithm signatureAlgorithm = SignatureAlgorithm.HS256;

        //生成JWT的时间
        long nowMillis = System.currentTimeMillis();
        Date now = new Date(nowMillis);

        //创建payload的私有声明（根据特定的业务需要添加，如果要拿这个做验证，一般是需要和jwt的接收方提前沟通好验证方式的）
        Map<String, Object> claims = new HashMap<String, Object>();
        claims.put("id", user.getUserPkid());
        claims.put("username", user.getUsername());
        claims.put("password", user.getPassword());

        //生成签名的时候使用的秘钥secret,这个方法本地封装了的，一般可以从本地配置文件中读取，切记这个秘钥不能外露哦。它就是你服务端的私钥，在任何场景都不应该流露出去。一旦客户端得知这个secret, 那就意味着客户端是可以自我签发jwt了。
        String key = user.getPassword();

        //生成签发人
        String subject = user.getUsername();

        //下面就是在为payload添加各种标准声明和私有声明了
        //这里其实就是new一个JwtBuilder，设置jwt的body
        JwtBuilder builder = Jwts.builder()
                //如果有私有声明，一定要先设置这个自己创建的私有的声明，这个是给builder的claim赋值，一旦写在标准的声明赋值之后，就是覆盖了那些标准的声明的
                .setClaims(claims)
                //设置jti(JWT ID)：是JWT的唯一标识，根据业务需要，这个可以设置为一个不重复的值，主要用来作为一次性token,从而回避重放攻击。
                .setId(UUID.randomUUID().toString())
                //iat: jwt的签发时间
                .setIssuedAt(now)
                //代表这个JWT的主体，即它的所有人，这个是一个json格式的字符串，可以存放什么userid，roldid之类的，作为什么用户的唯一标志。
                .setSubject(subject)
                //设置签名使用的签名算法和签名使用的秘钥
                .signWith(signatureAlgorithm, key);
        if (ttlMillis >= 0) {
            long expMillis = nowMillis + ttlMillis;
            Date exp = new Date(expMillis);
            //设置过期时间
            builder.setExpiration(exp);
        }
        return builder.compact();
    }


    /**
     * Token的解密
     * @param token 加密后的token
     * @param user  用户的对象
     * @return
     */
    public static Claims parseJWT(String token, User user) {
        //签名秘钥，和生成的签名的秘钥一模一样
        String key = user.getPassword();

        //得到DefaultJwtParser
        Claims claims = Jwts.parser()
                //设置签名的秘钥
                .setSigningKey(key)
                //设置需要解析的jwt
                .parseClaimsJws(token).getBody();
        return claims;
    }


    /**
     * 校验token
     * 在这里可以使用官方的校验，我这里校验的是token中携带的密码与数据库一致的话就校验通过
     * @param token
     * @param user
     * @return
     */
    public static Boolean isVerify(String token, User user) {
        //签名秘钥，和生成的签名的秘钥一模一样
        String key = user.getPassword();

        //得到DefaultJwtParser
        Claims claims = Jwts.parser()
                //设置签名的秘钥
                .setSigningKey(key)
                //设置需要解析的jwt
                .parseClaimsJws(token).getBody();

        if (claims.get("password").equals(user.getPassword())) {
            return true;
        }

        return false;
    }
}

4、持久层登录

@Repository("userMapper")
public interface UserMapper extends BaseMapper<User> {
    @Select("select * from t_user where username=#{username} and password=#{password}")
    User login(@Param("username") String username, @Param("password") String password);
}

5、业务层调用

@Service("userService")
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements IUserService {

    @Resource
    private UserMapper userMapper;

    @Override
    public User login(String username, String password) {
        return userMapper.login(username,password);
    }
}

6、controller接口

@PostMapping("/login")
@ResponseBody
public ResultVO login(String username,String password,HttpServletResponse response){
    User user = userService.login(username,password);

    if(user != null && user.getUserPkid() > 0){

        String token = JwtUtil.createJWT(36000000, user);
        response.setHeader("Authorization",token);
        return ResultVO.success(user);
    }
    else{
        return ResultVO.fail(ResultCode.USER_LOGIN_ERROR);
    }
}

这里的ResultVO与ResultCode是反馈给前端数据的封装

ResultCode.java

public enum ResultCode {
    SUCCESS(0,"成功"),
    // 参数错误1001-1999
    BODY_NOT_MATCH(400,"请求的数据格式不符!"),
    PARAM_IS_INVALID(1001,"参数无效"),
    PARAM_IS_BLANK(1002,"参数为空"),
    PARAM_TYPE_BAND_ERROR(1003,"参数类型错误"),
    PARAM_NOT_COMPLETE(1004,"参数缺失"),
    PARAM_NUMBER_MISS(1005,"参数个数不匹配"),
    // 用户错误2001-2999
    USER_NOT_LOGGED_IN(2001,"用户未登录"),
    USER_LOGIN_ERROR(2002,"账户不存在或密码错误"),
    USER_ACCOUNT_FORBIDDEN(2003,"账户已被禁用"),
    USER_NOT_EXIST(2004,"用户不存在"),
    USER_HAS_EXISTED(2005,"用户已存在"),
    USER_PASS_ERROR(2006,"密码错误"),
    USER_AUTHENTICATION_ERROR(2007,"认证失败"),
    USER_AUTHORIZATION_ERROR(2008,"没有权限"),
    // 服务器错误3001-3999
    SERVER_OPTIMISTIC_LOCK_ERROR(3001,"操作冲突"),
    SERVER_INNER_ERROR(3002,"服务器内部错误"),
    SERVER_UNKNOW_ERROR(3003,"服务器未知错误"),
    SERVER_EMPTY_RESULT_DATA_ACCESS_ERROR(3004,"没有找到对应的数据");

    private Integer code;
    private String message;
    ResultCode(Integer code, String message) {
        this.code = code;
        this.message = message;
    }
    public Integer code(){
        return this.code;
    }
    public String message(){
        return this.message;
    }
}

ResultVO.java

@Data
@ApiModel(value = "前台数据封装")
public class ResultVO implements Serializable {
    @ApiModelProperty("成功或者失败的代码号")
    private Integer code;
    @ApiModelProperty("成功或者失败的信息")
    private String message;
    @ApiModelProperty("返回前台的值")
    private Object data;
    @ApiModelProperty("返回集合的数量")
    private Long count;
    @ApiModelProperty("返回分页之后的页数")
    private Long pages;

    public ResultVO(Integer code, String message) {
        this.code = code;
        this.message = message;
    }

    public ResultVO(ResultCode resultCode, Object data){
        this.code = resultCode.code();
        this.message = resultCode.message();
        this.data = data;
    }
    public ResultVO(ResultCode resultCode){
        this.code = resultCode.code();
        this.message = resultCode.message();
    }
    // 返回成功
    public static ResultVO success(){
        ResultVO resultVO = new ResultVO(ResultCode.SUCCESS);
        return resultVO;
    }
    // 返回成功
    public static ResultVO success(Object data){
        ResultVO resultVO = new ResultVO(ResultCode.SUCCESS,data);
        return resultVO;
    }
    // 返回失败
    public static ResultVO fail(ResultCode resultCode){
        ResultVO resultVO = new ResultVO(resultCode);
        return resultVO;
    }
    // 返回失败
    public static ResultVO fail(Integer code,String message){
        ResultVO resultVO = new ResultVO(code,message);
        return resultVO;
    }
    // 返回失败
    public static ResultVO fail(ResultCode resultCode, Object data){
        ResultVO resultVO = new ResultVO(resultCode,data);
        return resultVO;
    }
}

前端处理

当然前端首先需要登录页面，这个在之前已经写过了，直接使用的ElenentUI组件，并且还带有页面验证

1、Login.vue

<template>
  <div>
    <Center>
      <el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名称" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>
        <el-form-item label="用户密码" prop="password">
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')"
            >提交</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </Center>
  </div>
</template>

<script>
import {login} from '@/services/UserService.js'
import Center from "@/components/Center";
export default {
  components: {
    Center,
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        username: "",
        password: "",
        checkPass: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style></style>

2、创建UserService.js发送数据

由于后台是的方法必须要post提交，但是axios的post提交默认发送数据时，数据格式是Request Payload，而并非我们常用的Form Data格式，后端未必能正常获取到，所以在发送之前，需要使用qs模块对其进行处理。

因此需要先导入qs模块

npm install qs --save

UserService.js

import axios from 'axios';
import qs from 'qs'

export async function login(user){
    var resp = await axios.post("/api/springboot181/user/login",qs.stringify({
        username:user.username,
        password:user.password   
    }));
    console.log(resp);
    var token = resp.headers.authorization;
    //将token保存到浏览器的localStorage中
    if(token){
        localStorage.setItem("token",token);
    }

    return resp;
}

这里的login方法做了两件事情

1、将用户名密码发送到后台进行验证 2、将后台反馈回来的jwt数据保存在本地浏览器的localStorage

这样，我们可以在login.vue页面做一下提交测试了，当然，在提交的代码中应该加上UserService中的login方法，看看后台和反馈的效果，数据有没有被写到localStorage中

Login.vue页面

//其他代码省略
submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      login(this.ruleForm).then((resp)=>{
        console.log("==============");
        console.log(resp.data);
      })
      alert("submit!");
    } else {
      console.log("error submit!!");
      return false;
    }
  });
},
//其他代码省略

使用Vuex

前面已经讲解过了vuex，我们可以试着把登录的数据请求加入到vuex中

1、创建userStore.js仓库对象

import { login } from "@/services/UserService";

//userStore仓库对象
export default {
  namespaced: true, //开启命名空间
  state: {
    user: null,
  },
  mutations: {
    setUser(state, payload) {
      state.user = payload;
    },
  },
  actions: {
    async login(context, payload) {
      var resp = await login(payload);
      var result = false;
      if (resp.data.code == 0) {
        context.commit("setUser", resp.data.data);
        result = true;
      }
      return result;
    }, 
  },
};

2、在index.js中引入仓库对象

import Vue from 'vue'
import vuex from 'vuex'
import channelStore from './channelStore';
import userStore from './userStore';

Vue.use(vuex);

var store = new vuex.Store({
    modules:{
        channelStore,userStore
    }
});

export default store;

3、再次更改Login.vue中登录的js代码，替换为调用vuex中的action

//其他代码省略
submitForm(formName) {
  this.$refs[formName].validate((valid) => {
    if (valid) {
      this.$store.dispatch("userStore/login",this.ruleForm)
      alert("submit!");
    } else {
      console.log("error submit!!");
      return false;
    }
  });
},

验证登录

当然jwt最重要的功能并不是登录发送一个jwt数据就算了，保留这个数据，主要就是为了保持状态，因此，我们完全可以在下次登录的时候，通过jwt，验证该浏览器的用户是否已经登录

当然，首先还是后台代码，在Controller中加入verify验证登录的代码

1、后台verify验证

@RequestMapping("/verify")
@ResponseBody
public ResultVO verify(HttpServletRequest request){
    String authHeader = request.getHeader("authorization");
    System.out.println("=====>" + authHeader);
    //截取前面的Bearer
    String token = authHeader.substring(7);
    // 由于登录的时候在jwt中保存了用户的主键id
    //因此这里再次从jwt中取出id数据，验证该用户
    int userId = 0;
    try {
        userId = JWT.decode(token).getClaim("id").asInt();
    } catch (JWTDecodeException j) {
        System.out.println(j.getStackTrace());
        //throw new RuntimeException("访问异常！");
    }
    User user = userService.getById(userId);
    if(user != null){
        Boolean verify = JwtUtil.isVerify(token, user);
        if(verify){
            return ResultVO.success(user);
        }
        else{
            return ResultVO.fail(ResultCode.USER_AUTHENTICATION_ERROR);
        }
    }
    else{
        return ResultVO.fail(ResultCode.SERVER_EMPTY_RESULT_DATA_ACCESS_ERROR);
    }
}

2、UserService中编写远程验证方法

export async function verify(){

    let token = localStorage.getItem("token");

    if(!token){
        return null;
    }

    let resp = await axios.get("/api/springboot181/user/verify",{
        headers:{
            'Authorization': 'Bearer ' + token
        }
    });

    return resp;
}

3、vuex仓库的actions中调用异步方法给state赋值

import { login,verify } from "@/services/UserService";

//userStore仓库对象
export default {
  namespaced: true, //开启命名空间
  state: {
    user: null,
    isLoading:false,
  },
  mutations: {
    setUser(state, payload) {
      state.user = payload;
    },
    setIsLoading(state,payload){
        state.isLoading = payload;
    }
  },
  actions: {
    async login(context, payload) {
      var resp = await login(payload);
      var result = false;
      if (resp.data.code == 0) {
        context.commit("setUser", resp.data.data);
        result = true;
      }
      return result;
    },
    async verify(context) {
        context.commit("setIsLoading",true);
        var resp = await verify();
        if(resp != null){
            context.commit("setUser", resp.data.data);
        }
        context.commit("setIsLoading",false);
    }, 
  },
};

这里加入了一个isLoading的变量，目的是为了在登录的时候多一个正在登录的缓冲

4、在main.js中直接调用验证方法

main.js中加入下面的代码：

//其他代码省略
store.dispatch("userStore/verify");

5、在Header.vue中使用vuex的userStore数据

</template>
    ........其他代码省略

    <div class="user">
          <!-- 情况1.正在加载中 -->
          <span v-if="isLogining">正在登录......</span>
          <!-- 情况2.登录成功 -->
          <template v-else-if="user">
            <a href="">{{user.username}}</a>
            <a href="">退出登录</a>
          </template>
          <!-- 情况3.没有登录 -->
          <template v-else>
            <router-link :to="{ name: 'Login' }">登录</router-link>
            <router-link :to="{ name: 'Reg' }">注册</router-link>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import logo from "@/assets/logo.png";
export default {
  components: {
    logo,
  },
  data() {
    return {
      logUrl: logo,
    };
  },
  computed: {
    ...mapState("channelStore", ["channels"]),
    ...mapState("userStore", {
      user: "user",
      isLogining: "isLoading",
    }),
  }
};
</script>

加入 个人中心 与 退出

现在已经实现了登录，但是还想要两个效果，点击退出能退出登录，点击个人中心，直接进入个人中心页面

1、个人中心页面 Personal.vue

这个页面比较简单，我们做一个简单的页面，然后再做一个router导航配置 Personal.vue

<template>
    <Center>
        <h1>个人中心</h1>
        <h2>用户名称:{{user.username}}</h2>
        <h2>用户密码:{{user.password}}</h2>
        <h2>用户昵称:{{user.nickname}}</h2>
        <h2>注册时间:{{user.regTime}}</h2>
    </Center>
</template>

<script>
import {mapState} from 'vuex'
import Center from '@/components/Center.vue'

export default {
  components: { Center },
  computed:{
      ...mapState("userStore",["user"])
  }    
}
</script>
<style></style>

2、路由页面中加入Personal页面的导航

路由config.js加入下面的导航映射

{
    path:"/personal",
    name:"Personal",
    component:()=>import('@/views/Personal'),
},

3、UserService中加入退出方法

退出实际就是jwt从浏览器的localstorage中删除就行了，所以这个方法很简单

/**
 * 注销
 */
export function loginOut() {
    localStorage.removeItem("token");
}

4、退出方法可能也需要在很多地方调用，放入到vuex中统一管理，并且需要情况state.user的数据

在actions中加入loginout方法

import { login,verify,loginOut } from "@/services/UserService";

export default {
  //...其他代码省略
  actions: {
    //...其他代码省略
    loginOut(context) {
        loginOut();
        context.commit("setUser", null);
    },
  },
};

5、在Header.vue中加入相应的代码

<template>
  <!--其他代码省略-->
    <div class="user">
      <!-- 情况1.正在加载中 -->
      <span v-if="isLogining">正在登录......</span>
      <!-- 情况2.登录成功 -->
      <template v-else-if="user">
        <router-link :to="{name:'Personal'}">{{ user.username }}</router-link>
        <a href="" @click.prevent="handleLoginOut">退出登录</a>
      </template>
      <!-- 情况3.没有登录 -->
      <template v-else>
        <router-link :to="{ name: 'Login' }">登录</router-link>
        <router-link :to="{ name: 'Reg' }">注册</router-link>
      </template>
    </div>
</template>

<script>
export default {
  //...其他代码省略
  methods: {
    handleLoginOut(){
      this.$store.dispatch("userStore/loginOut");
      this.$router.push({name:"Login"});
    }
  },
};
</script>

本文链接：http://www.yanhongzhi.com/post/VueInAction-13.html

-- EOF --

作者 admin 发表于 2021-05-26 11:03:00 ，添加在分类 Vue In Acrion 下 ，并被添加「 vue 」标签 ，最后修改于 2021-05-26 11:03:00

Comments