SpringBootで値をセッション保持する（axiosからリクエストを投げる場合）

SpringBoot側で値を保持してほしいのになかなかできなくて困ってたが、時間が経ってゆっくり考えたら案外簡単にできた。

SpringBoot側

@RestController
public class IndexController {
    
    @Autowired
    private AbcData abc;

    @PostMapping("/")
    @CrossOrigin(origins = { "http://localhost:3000/" }, allowCredentials = "true")
    public String postIndex() {
        abc.setA("test");
        return "test";
    }
}

@Data
@Component
@Scope(value= "session", proxyMode = ScopedProxyMode.TARGET_CLASS)
public class AbcData {
    private String a;
}

axios側(React)

export const App = () => {
  return (
    <div>
      <button onClick={async () => {
        const res = await axios.post<string>("http://localhost:8080/", null, {withCredentials: true});
        console.log(res.data)
      }}>aaaaa</button>
    </div>
  );
}

React.VFCとReact.FCの違い

React.FCはchildrenを持っている。

実装

VFC
export const Vfc: React.VFC = () => {
  return (
    <div>aaa</div>
  );
};
FC
export const Fc: React.FC = ({children}) => {
  return (
    <div>children</div>
  );
};
呼び出し元
import { Vfc } from './components/Vfc';
import { Fc } from './components/Fc';

export const App: React.VFC = () => {

  return (
    <div className="p-8">
      <Vfc />
      <Fc>test</Fc>
    </div>
    
  );
};

childrenはタグの中身っぽくなってる。 propsにコンポーネントをまるまる渡すのが面倒なときはこっちのほうが入れ子でかけるからいいかもしれない。

コンポーネント

引数無し

実装

export const Component: React.VFC = () =>  {
  return (
    <div>
      <h2>Componentです</h2>
    </div>
  );
};

呼び出し元

import { Component } from './components/Component';

export const App: React.VFC = () => {
  return (
    <div>
      <Component />
    </div>
    
  );
};
引数有り

実装

type Props = {
  aaa: string
};

export const Component: React.VFC<Props> = (props: Props) =>  {
  return (
    <div>
      <h2>Componentです{props.aaa}</h2>
    </div>
  );
};

呼び出し元

import { Component } from './components/Component';

export const App: React.VFC = () => {
  return (
    <div>
      <Component aaa="aaaa"/>
    </div>
    
  );
};