Vue+flask搭建测试管理平台demo

前言：

实现内容：前端使用vue-cli搭建vue项目，后端使用flask，初步未使用数据库做数据处理，仅用文本json作为后台数据处理。

使用技术栈

前端

Vue
Emlement UI
axios

后端

flask

登录界面

首页界面

用户列表界面

遇到的难点

token的验证处理流程

前端输入账号密码传给后端，后端进行HS256加盐加密处理，生成token值传给前端，前端接收token值后保存到Session Storage中，后面前端页面发送请求都需带此token值到后端，后端进行token验证是否无效或过期，并return响应，token无效或过期则将Session Storage的token值删除掉，并通过vue的路由跳转到登录界面

创建token值

def create_token(payload, timeout=20):
    """
    :param payload:  例如：{'username': "admin",'password':'12345678'}用户信息
    :param timeout: token的过期时间，默认20分钟
    :return:
    """
    headers = {
        'typ': 'jwt',
        'alg': 'HS256'
    }
    payload['status'] = True
    payload['exp'] = datetime.datetime.utcnow() + datetime.timedelta(minutes=timeout)
    result = jwt.encode(payload=payload, key=JWT_SALT, algorithm="HS256", headers=headers)
    return result

token值验证

def parse_payload(token):
    """
    对token进行和发行校验并获取payload
    :param token:
    :return:
    """
    try:
        # 从token中获取payload【不校验合法性】
        # unverified_payload = jwt.decode(token, None, False)
        # print(unverified_payload)
        # 从token中获取payload【校验合法性】
        # verified_payload = jwt.decode(token, JWT_SALT, True)
        verified_payload = jwt.decode(token, JWT_SALT, algorithms=['HS256'])
        return verified_payload
    except exceptions.ExpiredSignatureError:
        result = {'status': False, 'token': 'token已失效'}
        print('token已失效')
        return result
    except jwt.DecodeError:
        result = {'status': False, 'token': 'token认证失败'}
        print('token认证失败')
        return result
    except jwt.InvalidTokenError:
        result = {'status': False, 'token': '非法的token'}
        print('非法的token')
        return result

前端Vue挂载路由导航守卫

// 挂载路由导航守卫
router.beforeEach((to, from, next) => {
  // to 将要访问的路径
  // from代表从哪个路径跳转而来
  // next是一个函数，表示放行
  if (to.path === '/login') return next();
  // 获取token
  const token_str = window.sessionStorage.getItem('token')
  if (!token_str) return next('/login')
  next()
})

总结：过程中遇到的难点不少，先做下难点重点记录，小白一个，有错误或者可优化的地方还请大佬指教。
附上链接：
链接：https://pan.baidu.com/s/1e-FOGzl4sJYaVvMjoEy4kg
提取码：t5mg