Reactでログイン機能実装する時にLocalStorageに保存する方法

Question

import React ,{Component} from 'react';
import './Login.module.css';
import Button from '../UI/Button/Button';
import Input from '../UI/Input/Input';
import classes from './Login.module.css';
import {Redirect,Link} from 'react-router-dom';
class Login extends Component{
  
       state = {
        controls: {
          email: {
            elementType: "input",
            elementConfig: {
              type: "email",
              placeholder: "Mail Address"
            },
            value: "",
            validation: {
              required: true,
              isEmail: true
            },
            valid: false,
            touched: false
          },
          password: {
            elementType: "input",
            elementConfig: {
              type: "password",
              placeholder: "Password"
            },
            value: "",
            validation: {
              required: true,
              minLength: 6
            },
            valid: false,
            touched: false
          },
          passwordre: {
            elementType: "input",
            elementConfig: {
              type: "password",
              placeholder: "Password"
            },
            value: "",
            validation: {
              required: true,
              minLength: 6
            },
            valid: false,
            touched: false
          }
        },
        // redirectToReferrer:false
      };


    SignIn = (event) => {
        event.preventDefault();
        const urlsign = 'https://teachapi.herokuapp.com/sign_in';
        alert("loh")
        let data = {
            "sign_in_user_params": {
              "email": this.state.controls.email.value,
              "password":this.state.controls.password.value,
              "password_confirmation":this.state.controls.passwordre.value
            }
        }
          fetch(urlsign, {
            method: "POST",
            headers: {
              'Accept': 'application/json',
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
          })
        .then(json => {
            console.log(json)
        })
        .then(json => {
            //ユーザ生成時に以下の情報をローカルストレージに入れる。
            localStorage.token = json.token,
              localStorage.id = json.id,
              localStorage.name = json.name,
              localStorage.bio = json.bio
            window.location.href = 'timeline.html';
          })
        .then(responseData => {
            console.log(responseData);
          })
          .catch(err => {
            console.log(err, err.data);
          });
      };

  checkValidity(value, rules) {
    let isValid = true;
    if (!rules) {
      return true;
    }
    if (rules.required) {
      isValid = value.trim() !== "" && isValid;
    }
    if (rules.minLength) {
      isValid = value.length >= rules.minLength && isValid;
    }
    if (rules.maxLength) {
      isValid = value.length <= rules.maxLength && isValid;
    }
    return isValid;
  }

  onChange=(event, controlName)=>{
    const updatedControls = {
        ...this.state.controls,
        [controlName]: {
          ...this.state.controls[controlName],
          value: event.target.value,
          valid: this.checkValidity(
            event.target.value,
            this.state.controls[controlName].validation
          ),
          touched: true
        }
      };
      this.setState({ controls: updatedControls });
   }

    render(){
        // if(this.state.redirectToReferrer){
        //     return(<Redirect to={'/home/'} />)
        // }
        // if(sessionStorage.getItem('userData')){
        //     return(<Redirect to={'/home/'} />)
        // }

        const formElementsArray = [];
        for (let key in this.state.controls) {
          formElementsArray.push({
            id: key,
            config: this.state.controls[key]
          });
        }
        const form = formElementsArray.map(formElement => (
          <Input
            key={formElement.id}
            elementType={formElement.config.elementType}
            elementConfig={formElement.config.elementConfig}
            value={formElement.config.value}
            invalid={!formElement.config.valid}
            shouldValidate={formElement.config.validation}
            touched={formElement.config.touched}
            changed={event=>this.onChange(event,formElement.id)}
          />
        ));
        return(
            <div>
            <p>お帰りなさい！</p>
            <div className={classes.Auth}>
            <form>
              {form}
              <button onClick={this}>ログイン</button>
              <Button clicked={this.Signin} btnType="Success">ログイン</Button>
            </form>
            <div className={classes.NavigationItem}>
            <Link to="/signin">新規登録</Link>
            </div>
          </div>
          </div>
        )
    }
}
export default Login;

現在Reactでログイン機能を作っております。
しかし、javascriptのようなLocalStorageの保管方法ではエラーが起きてしまいます。
エラー内容は```エラー内容
Expected an assignment or function call and instead saw an expression.

このようなものです。
ReactでLocalStorageに保存する際はどのような記述が必要なのでしょうか？

Answer 1

そもそも論として、localStorageの中身はユーザーからでもJavaScriptからでも確認・変更可能ですので、ログイントークンのような重要な情報を置く場所としては適当ではありません。

Comments

[21212121]

そうなると、Cookieで保存したほうがいいのですか？

Answer 2

jsでもreactでも変わらず、

localStorage.setItem('キー', '値');

でlocalstorageに値を保存できると思います。

上記を試してもエラーが起きているから、
localstorage.token = 'token'といったような記述に変えているのかどうかはちょっと察せなかったので、
reactでlocalstorageに値を保存する方法について回答してみました

Comments

[21212121]

ありがとうございます！

[21212121]

無事解決することができました。