- Sử dụng được react-router-dom để navigate các trang với nhau
- Kết hợp được react-router-dom và phương thức xác thực người dùng thông qua trang đăng nhập
- React code-splitting kết hợp với react-router-dom
- Dynamic route config
- Truyền tham số trên url
- Khi người dùng đăng nhập thành công, sẽ lưu giá trị của token (tùy ý với độ dài lớn hơn 0) tại localStorage với tên là token.
- Sử dụng file config route và component (vì trong thực tế không thể config bằng tay)
- Nếu chạy test bị lỗi có thể xem lại video test bằng cách click vào phím phía dưới
- Tham khảo trang bài giải mẫu tại đây
- Người dùng truy cập đến /dashboard. Vì chưa đăng nhập, nên người dùng được chuyển về path /login
- Nếu người dùng không có token thì người dùng sẽ được chuyển đến route đăng nhập /login
- Khi người dùng đang ở trang đăng nhập /login và nhập mật khẩu sai vào input (với selector là input[data-test=login__pwd]) và nút submit (với selector là button[data-test=login__submit]) thì sẽ không được chuyển hướng tới /dashboard, đồng thời input nhập mật khẩu cũng sẽ được reset về giá trị rỗng.
- Ngược lại, user nhập mật khẩu đúng sẽ được chuyển về /dashboard, tương tự với selector ở case 3, khi người dùng nhập mật khẩu là 123 thì người dùng sẽ được chuyển hướng về /dashboard.
- Người dùng đã đăng nhập thành công sẽ không thể truy cập route /login, thay vào đó sẽ được chuyển hướng về /dashboard.
- Người dùng sau khi đăng nhập thành công có thể refresh trình duyệt và khi truy cập tới route mặc định / và tự động được chuyển tới /dashboard
- Người dùng chuyển tới các route qua lại sẽ không reload lại trang (chỉ render component khác chứ không sử dụng location api của window object) (là 1 thuộc tính của SPA)
- Người dùng khi chuyển hướng tới protected route /functions thì hiển thị nội dung text: Functions page
- Người dùng khi chuyển hướng tới protected route /functions/foo thì sẽ hiển thì nội dung text: Function Foo
- Người dùng khi chuyển hướng đến protected route /setting thì không hiển thị section (truyền được URL query). Ví dụ /setting?section=general thì sẽ hiển thị nội dung: Setting page - Section: general
- User bấm đăng xuất với selector button[data-test=logout__btn] sẽ trở về trang đăng nhập.
- User khi truy cập tới một route không được định nghĩa trong file config sẽ hiển thị Page not found với selector [data-test=404]
- Ứng dụng được implement code-splitting
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent