서버 통신을 활용한 블로그 앱 (사전 작업 + 로그인)

View (login_body.dart 파일 내용)

• 로그인 버튼 기능을 아래 이미지와 같이 정의 합니다.

• ConsumerWidget 변경 및 SessionGVM 객체 가져오는 내용 생략

ViewModel (session_gvm.dart 파일 내용)

Future<void> login(String username, String password) async {
    final body = {
      "username": username,
      "password": password,
    };

    // final 대신 var도 사용 가능
    final (responseBody, accessToken) =
        await userRepository.findByUsernameAndPassword(body);

    if (!responseBody["success"]) {
      ScaffoldMessenger.of(mContext!).showSnackBar(
        SnackBar(content: Text("로그인 실패 : ${responseBody["errorMessage"]}")),
      );
      return;
    }

    // 1. SessionUser 갱신
    Map<String, dynamic> data = responseBody["response"];
    state = SessionUser(
        id: data["id"],
        username: data["username"],
        accessToken: accessToken,
        isLogin: true);

    // 2. 토큰을 Storage 저장. 오래걸리기 때문에 await 필수
    await secureStorage.write(key: "accessToken", value: accessToken); // I/O

    // 3. Dio 토큰 세팅
    dio.options.headers = {"Autohrization": accessToken}

    Navigator.popAndPushNamed(mContext, "/post/list");
  }

Repository

Future<(Map<String, dynamic>, String)> findByUsernameAndPassword(
      Map<String, dynamic> data) async {
    Response response = await dio.post("/login", data: data);
    Map<String, dynamic> body = response.data;
    //Logger().d(body); // test 코드 작성 직접해보기

    String accessToken = "";
    try {
      // 로그인에 실패하면 토큰이 없어 null 예외가 발생하기 때문에 try 사용
      accessToken = response
          .headers["Authorization"]![0]; // 헤더에 있는 토큰 값을 가져옴 / 0번지에 토큰이 있다.
    } catch (e) {}

    //Logger().d(accessToken);
    return (body, accessToken);
  }