vue-element-admin后台集成方案

vue-element-admin介绍

• vue-element-admin是一个后台前端解决方案，它基于vue和element-ui实现
• 内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件
• 可以快速搭建企业级中后台产品原型
• 地址：https://panjiachen.github.io/vue-element-admin-site/zh/guide/

安装

由于tui-editor插件已经改名，安装依赖时会报错，请根据以下链接进行修改：

https://blog.youkuaiyun.com/qq_58472337/article/details/131860473

# 克隆项目
git clone https://github.com/PanJiaChen/vue-element-admin.git

# 进入项目目录
cd vue-element-admin

# 安装依赖
npm install

# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npmmirror.com

# 本地开发 启动项目
npm run dev

Token认证

Token是在服务端产生的一串字符串，是客户端访问资源接口（API）时所需要的资源凭证，流程如下

• 客户端使用用户名跟密码请求登录，服务端收到请求，去验证用户名和密码
• 验证成功后，服务端会签发一个token并把这个token发送给客户端
• 客户端收到token以后。会把它存储起来，比如放在cookie里或者localStorage里
• 客户端每次向服务端请求资源的时候需要带着服务端签发的token
• 服务端收到请求，然后去验证客户端请求里面带着的token，如果验证成功，就像客户端返回请求的数据
  

Token认证特点

• 基于token的用户认证是一种服务端无状态的认证方式，服务端不用存放token数据
• 用解析token的计算时间换取session的存储空间，从而减轻服务器的压力，减少频繁地查询数据库
• token完全由应用管理，所以它可以避开同源策略

JWT

• JSON Web Token（简称JWT）是一个token的具体实现方式，是目前最流行的跨域认证解决方案
• JWT的原理是，服务器认证以后，生成一个JSON对象，发回给用户，具体如下：

  {
  	"姓名":"张三",
  	"角色":"管理员",
  	"到期时间":"2018年7月1日0点0分"
  }
  

• 用户与服务端通信的时候，都要发回这个JSON对象。服务器完全只靠这个对象认定用户身份
• 为了防止用户篡改数据，服务器在生成这个对象的时候，会加上签名
• JWT由三个部分组成：
  • Header（头部）
  • Payload（负载）
  • Signature（签名）
    三部分最终组合为完整的字符串，中间使用.分隔，例如：
    

Header

• Header部分是一个JSON对象，描述JWT的元数据

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

• alg属性表示签名的算法（algorithm），默认是HMAC SHA256（写成HS256）
• typ属性表示这个令牌（token）的类型（type），JWT令牌统一写为JWT
• 最后，将上面的JSON对象使用Base64URL算法转成字符串

Payload

• Payload部分也是一个JSON对象，用来存放实际需要传递的数据。JWT规定了7个官方字段：
  • iss(issuer)：签发人
  • exp(expiration time)：过期时间
  • sub(subject)：主题
  • aud(audience)：受众
  • nbf(Not Before)：生效时间
  • iat(Issued At)：签发时间
  • jti(JWT ID)：编号
• 注意，JWT默认是不加密的，任何人都可以读到，所以不要把秘密信息放在这个部分
• 这个JSON对象也要使用Base64URL算法转成字符串

Signature

• Signature部分是对前两部分的签名，防止数据被篡改
• 首先，需要指定一个密钥（secret），这个密钥只有服务器才知道，不能泄露给用户
• 然后，使用Header里面指定的签名算法（默认是HMAC SHA256），按照下面的公式产生签名

  HMACSHA256(
  	base64UrlEncode(header) + "." + base64urlEncode(payload),
  	secret)
  

JWT的特点

• 客户端收到服务器返回的JWT，可以存储在Cookie里面，也可以存储在localStorage
• 客户端每次与服务器通信，都要带上这个JWT，可以把它放在Cookie里面自动发送，但是这样不能跨域
• 更好的做法是放在HTTP请求的头信息Authorization字段里面，单独发送

生成Token

import java.util.Date;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;

    // 7天过期
    private static long expire = 604800;
    // 32位密钥
    private static String secret = "abcdefghiabcdefghiabcdefghiabcdefghi";

    // 生成token
    public static String generateToken(String username){
        Date now = new Date();
        Date expiration = new Date(now.getTime() + 1000 * expire);
        return Jwts.builder()
                .setHeaderParam("type","JWT")
                .setSubject(username)
                .setIssuedAt(now)
                .setExpiration(expiration)
                .signWith(SignatureAlgorithm.HS512,secret)
                .compact();
    }

解析Token

    // 解析token
    public static Claims getClaimsByToken(String token){
        return Jwts.parser()
                .setSigningKey(secret)
                .parseClaimsJws(token)
                .getBody();
    }