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也可实现过期时间
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值