Package AutoRoute Phần 6

Tiếp tục với chuỗi các bài viết tìm hiểu Package AutoRouter. Hôm nay mình sẽ tìm hiểu Route Guards

1. Guard

• Nó là một thành phần đứng giữa trong quá trình di chuyển của Route.

• Quyết định một Route có được di chuyển hay không ?

• Tình huống sử dụng :

  • App của bạn có một số chức năng mà cần phải login mới sử dụng được

  • Trường hợp chưa login, màn hình login sẽ hiển thị để thực hiện login. Khi đã login thành công thì mới tiếp tục thực hiện chức năng khác.

2. Triển Khai

• B1: Tạo một class kế thừa AutoRouteGuard

• B2: Override lại method OnNavigation , method này có 2 tham số :

  • NavigationResolver : Hỗ trợ xử lý di chuyển route.

  • StackRouter : Thông tin route mà app muốn di chuyển đến.

• Ví dụ :

  resolver.next(true); // Route này sẽ được di chuyển
  

  // redirect sẽ xoá RouteTarget() ra khỏi stack 
  // Nếu nó di chuyển sang Route khác.
  resolver.redirect(RouteTarget(); 
  

• Một ví dụ đầy đủ :

  class AuthGuard extends AutoRouteGuard {                
   @override                
   void onNavigation(NavigationResolver resolver, StackRouter router) {                
   // the navigation is paused until resolver.next() is called with either                 
   // true to resume/continue navigation or false to abort navigation                
       if(authenticated){                
         // if user is authenticated we continue                
          resolver.next(true);                
        }else{                
           // we redirect the user to our login page 
           // tip: use resolver.redirect to have the redirected route
            // automatically removed from the stack when the resolver is completed
           resolver.redirect(LoginRoute(onResult: (success){                
                  // if success == true the navigation will be resumed                
                  // else it will be aborted                
                 resolver.next(success);                
            }));                
           }                    
       }                
  }     
  

3. Apply

• Áp dụng cho một Route cụ thể :

  AutoRoute(
    path: PathRouter.privatePage,
    page: PrivateRoute.page,
    guards: [
      AuthGuard(),
    ],
  ),
  

• Áp dụng cho toàn bộ các Route

  class AppRouter extends _$AppRouter implements AuthGuard
  

3. Kích hoạt OnNavigation

• Guards có thể ngăn chặn chúng ta truy cập PrivatePage khi chưa login. Nhưng trạng thái đã login có thể thay đổi, ví dụ token hết hạn chẳng hạn chúng ta cần quay về màn hình Login.

• Triển khai :

  • Bước 1 : Tạo một nofier để thông báo khi state login thay đổi.

    class AuthProvider extends ChangeNotifier {
     bool _isLoggedIn = false;
    
     bool get isLoggedIn => _isLoggedIn;
    
     void login() {
       _isLoggedIn = true;
       notifyListeners();
     }
    
     void logout() {
       _isLoggedIn = false;
       notifyListeners();
     }
    }
    

  • Bước 2 : Gán notifier này cho tham số reevaluateListenable của contructors MaterialApp.router

     MaterialApp.router
     (    
        routerConfig: _appRouter.config(
        reevaluateListenable: authProvider,
        ),
     );
    

  • Mỗi khi notifer thông báo, phương thức onNavigation sẽ được gọi lại