javascript - TypeError：无法读取未定义的属性“单词”。在 React 中使用 CypherJS

Question

我想为我的网络应用程序使用某种编码，因为当我今天看到我的密码在 DevTools 的网络选项卡中肉眼可见时，我以为我会心悸或一些狗屎。我使用 CryptoJS 是因为它是在浏览器中弹出我的第一件事。我开始重写我的代码，当我看到一些错误时，我试图修复它们，但这个错误是有史以来最糟糕的错误。我用谷歌搜索了它，并没有看到任何真正关心我的东西。所以我来到这里，我问你到底发生了什么。这是一些代码：

编译器认为错误的代码

var key = this._keyPriorReset = this._key;
var keyWords = key.words;
var keySize = key.sigBytes / 4;

我认为错误的代码

import { Component } from 'react'
import CryptoJS from 'crypto-js'
import doesSesVarExist from '../doesSesVarExist'
import { Redirect } from 'react-router-dom'
import axios from 'axios';
import { ReactSession } from 'react-client-session';

require('dotenv').config();

export default class Info extends Component {
  constructor() {
    super();
    this.state = {
      theme: 'dark',
      profpic: '../profpic/default.png'
    }
  }

  componentDidMount() {
    if(!doesSesVarExist('username') || !doesSesVarExist('password')){
      window.location.href = 'http://localhost:3000/account/login'
    }
    if(doesSesVarExist('theme')){
      this.setState({
        theme: ReactSession.get('theme')
      })
    }else{
      if(doesSesVarExist('username') && doesSesVarExist('password')){
        axios.post('/api/get_theme', {
          username: CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(document.getElementById('username').value), process.env.ENCRYPTSECRETKEYUSERNAME),
          password: CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(document.getElementById('password').value), process.env.ENCRYPTSECRETKEYPASSWORD)
        }).then(response => {
          ReactSession.set('theme', response.data.theme)
          this.setState({
            theme: response.data.theme
          })
        })
      }else{
        ReactSession.set('theme', 'dark')
        this.setState({
          theme: ReactSession.get('theme')
        })
      }
    }

    axios.post('/api/get_profpic', {
      username: CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(ReactSession.get('username')), process.env.ENCRYPTSECRETKEYUSERNAME),
      password: CryptoJS.AES.encrypt(CryptoJS.enc.Utf8.parse(ReactSession.get('password')), process.env.ENCRYPTSECRETKEYPASSWORD)
    }).then(response => {
      this.setState({ 
        profpic: response.data
      })
    })
  }

  render() {
    if(!document.body.classList.contains(this.state.theme)){
      document.body.classList.remove('dark')
      document.body.classList.remove('light')
      document.body.classList.add(this.state.theme)
    }

    const onLogoutClick = () => {
      ReactSession.set('username', undefined)
      ReactSession.set('password', undefined)
      window.location.href = 'http://localhost:3000/account/login'
    }

    return(
      <div id="userinfo">
        <img src={'../' + this.state.profpic}></img>
        <p>{ReactSession.get('username')}</p>
        <div class={this.state.theme} onClick={() => onLogoutClick()}>Log out</div>
      </div>
    )
  }
}

标签： javascriptreactjscryptojs