flutter에서 go_router로 로그인시 라우팅 설정하기. 로그아웃일 때 못들어가게 하기.

안녕하세요, 오늘은 Flutter에서 Go_router를 이용하여 로그인 시 라우팅 설정하고 로그아웃 시 접근을 제한하는 방법에 대해 알아볼게요. Go_router는 Flutter에서 라우팅을 쉽게 관리할 수 있도록 도와주는 패키지에요.

Flutter GoRouter에서 로그인 여부에 따라 라우팅 설정하기

로그아웃 시 접근 제한
로그아웃 상태일 때는 로그인이 필요한 페이지에 접근할 수 없도록 설정해야해요. 이를 위해 Go_router의 redirect 옵션을 사용하여 로그인 상태를 체크하고, 로그아웃 상태일 때는 로그인 페이지로 리다이렉트하도록 설정해요.

 

 

핵심은 router 안에서 redirect로 로그인 상태가 아니면 로그인 페이지로 보내주는 것이에요!!

 

 

1. pubspec.yaml:

패키지 다운로드 합니다. flutter pub get 해주시고

dependencies:
  go_router: ^13.2.0

 

2. main.dart:

router는 router.dart로 따로 빼셔도 됩니다.

MaterialApp.router(

routerConfig: isLoggedIn

? ref.watch(routerProvider)

: ref.watch(logOutRouterProvider),

 

제 앱에 로그인 분기하는 부분인데요 저는 로그아웃 시에 갈 페이지가 많아 GoRouter를 2개 만들어서 로그인시, 로그아웃시 각각 만들고 상태를 riverpod로 나눠지게 만들었어요. 다음에는 이 방법도 자세히 알려드릴게요.

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'login_state.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);

  final _router = GoRouter(
    initialLocation: '/login',
    redirect: (state) {
      final isLoggedIn = LoginState().isLoggedIn;
      if (!isLoggedIn && state.location != '/login') {
        return '/login';
      }
      return null;
    },
    routes: [
      GoRoute(
        path: '/login',
        builder: (context, state) => LoginPage(),
      ),
      GoRoute(
        path: '/home',
        builder: (context, state) => HomePage(),
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routeInformationParser: _router.routeInformationParser,
      routerDelegate: _router.routerDelegate,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );
  }
}

 

3. login_state.dart:

저는 구글 로그인과 애플로그인을 지원하고 있는데 일단 간단하게 로그인 상태 getter만 만들어서 라우터에 쓰면 됩니다.

class LoginState {
  bool get isLoggedIn => _isLoggedIn;

  void login() {
    _isLoggedIn = true;
  }

  void logout() {
    _isLoggedIn = false;
  }

  bool _isLoggedIn = false;
}

 

 

4. LoginPage.dart:

로그인 페이지

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final _loginState = LoginState();

  void _login() {
    _loginState.login();
    context.go('/home'); // 로그인 후 원래 이동하려던 페이지로 이동
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _login,
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}

 

5. HomePage.dart:

로그인 이후 홈페이지 들어올 수 있어요

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Welcome to Home Page!'),
      ),
    );
  }
}

설명:

• go_router 패키지의 redirect 속성을 사용하여 로그인 여부에 따라 라우팅을 설정합니다.
• LoginState 클래스를 만들고 isLoggedIn getter를 사용하여 로그인 여부를 확인합니다.
• onRedirect 함수를 사용하여 로그인하지 않은 사용자를 로그인 페이지로 리디렉션합니다.
• 로그인 후 원래 이동하려던 페이지로 이동하도록 goRouter.go()를 사용합니다.

참고:

• go_router 패키지 문서: https://pub.dev/packages/go_router

오늘은 Flutter에서 Go_router를 이용하여 로그인 시 라우팅 설정하고 로그아웃 시 접근을 제한하는 방법에 대해 알아봤어요. 이제 여러분도 Go_router를 사용하여 라우팅을 쉽게 관리할 수 있어요. 다음에 또 만나요!