Vue学习笔记--- 登录安全

登录安全

方式

• 直接传输：http信息可能被抓包的形式进行抓取
• 加密：利用加密算法将明文加密，存在截获密文直接发送给服务器同样能够登录的问题
• token：每次请求携带token解决上面的问题，存在路由截取修改数据包字段的问题
• 数字签名：
  • 将报文通过哈希函数生成报文摘要
  • 用私钥进行加密生成签名，签名与报文一起发给接收方
  • 接受方通过哈希函数生成报文摘要，用公钥对数字签名进行解密生成验证摘要。对比确定字段是否进行修改，从而解决以上问题。
  • 数字签名是HTTPS能够确保数据完整性和防篡改的根本原因。

加密算法

• 对称加密算法
  • 需要同时修改代码
  • 加密算法在JS里面可能被直接破解并识别加密算法
• 非对称加密算法
  • 公私钥机制进行加密（HTTPS）
  • 仅能保证传输过程不被截获，客户端和服务端仍可被截获
  • 客户端被恶意引导安装‘中间人’的WEB信任证书造成泄漏
• JS加密函数
  • 采取策略：异步请求响应动态加载JS加密算法，服务端根据随机token返回加密策略

Token令牌

• 后端生成token令牌并写入Redis数据库并设置token参数
• token返回给前端，将token写入localStorage/store中
• 路由守卫检测localStorage/store存在与否，否则进行跳转进登录界面，否则next()
• 设置axios的拦截器进行拦截放入token
• 后端从请求头中提取token并且判断token是否存在
• 登录退出时后端从Redis数据库中删除，前端删除localStorage中token

拦截请求在头部加入token让服务端进行校验

axios.interceptors.request.use(
  config => {
    const token = sessionStorage.getItem('token')
    if (token ) { // 判断是否存在token，如果存在的话，则每个http header都加上token
      config.headers.authorization = token  //请求头加上token
    }
    return config
  },
  err => {
    return Promise.reject(err)
  })

拦截响应在服务端传回对应code情况下清除token进行登出的操作:(非法或失效)

axios.interceptors.response.use(
  response => {
    //拦截响应，做统一处理 
    if (response.data.code) {
      switch (response.data.code) {
        case 1002:
          store.state.isLogin = false
          router.replace({
            path: 'login',
            query: {
              redirect: router.currentRoute.fullPath
            }
          })
      }
    }
    return response
  },
  //接口错误状态处理，也就是说无响应时的处理
  error => {
    return Promise.reject(error.response.status) // 返回接口返回的错误信息
  })

实现长时间未点击登出效果：最后一次点击时间与当前时间的差别

export default{
    name: 'App',
    data (){
        return {
            lTime: new Date().getTime(), // 最后一次点击的时间
            ctTime: new Date().getTime(), //当前时间
            tOut: 10 * 60 * 1000   //超时时间10min
        } 
    },
    mounted () {
        window.setInterval(this.tTime, 1000)
    }
 
    methods:{
        clicked () {
            this.lTime = new Date().getTime()  //当界面被点击更新点击时间
        }
 
        tTime() {
            this.cTime = new Date().getTime()
            if (this.ctTime -this.lTime > tOut) {
                if(JSON.parse(sessionStorage.getItem('Login')) === true){
                    // 退出登录
                }
            }
        }
    }
}

• 实现登出效果：删除token/删除localStorage
• 实现离开页面保存一定时间的登录状态：页面加载中通过localStorage中设置的过期时间进行运算比较，大于过期时间则跳转回登录界面，小于过期时间则照常运行；除此之外可以设置cookie也可实现过期时间