update can redirect back to what they came from after login

This commit is contained in:
Kenta420 2023-10-05 13:56:04 +07:00
parent 1f4f5b6ad2
commit a12b30998d
3 changed files with 57 additions and 14 deletions

View file

@ -1,9 +1,20 @@
import { NgModule, inject } from '@angular/core'; import { NgModule, inject } from '@angular/core';
import { CanActivateFn, Router, RouterModule, Routes } from '@angular/router'; import {
ActivatedRoute,
ActivatedRouteSnapshot,
CanActivateFn,
Router,
RouterModule,
RouterStateSnapshot,
Routes,
} from '@angular/router';
import { UserService } from './core/services/user.service'; import { UserService } from './core/services/user.service';
import { lastValueFrom, map } from 'rxjs'; import { lastValueFrom, map } from 'rxjs';
const authGuard: CanActivateFn = () => { const authGuard: CanActivateFn = (
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) => {
const userService: UserService = inject(UserService); const userService: UserService = inject(UserService);
const router: Router = inject(Router); const router: Router = inject(Router);
@ -12,25 +23,35 @@ const authGuard: CanActivateFn = () => {
if (isAuth) { if (isAuth) {
return true; return true;
} }
return router.parseUrl('/login'); return router.createUrlTree(['/login'], {
queryParams: {
redirectUrl: state.url,
},
});
}) })
); );
}; };
const loginGuard: CanActivateFn = () => { const loginGuard: CanActivateFn = (
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
) => {
const userService: UserService = inject(UserService); const userService: UserService = inject(UserService);
const router: Router = inject(Router); const router: Router = inject(Router);
return lastValueFrom(userService.getCurrentUser()) return userService.isAuthenticated.pipe(
.then(({ user }) => { map((isAuth) => {
if (user) { if (!isAuth) {
return router.parseUrl('/dashboard'); return true;
} }
return true; // redirect to redirectUrl query param
console.log(route.queryParams['redirectUrl']);
return router.createUrlTree([
router.parseUrl(route.queryParams['redirectUrl'] ?? '/dashboard'),
]);
// return false;
}) })
.catch(() => { );
return true;
});
}; };
const routes: Routes = [ const routes: Routes = [
@ -65,6 +86,14 @@ const routes: Routes = [
), ),
canActivate: [authGuard], canActivate: [authGuard],
}, },
{
path: 'recipe',
loadComponent: () =>
import(
'./features/dashboard/recipe-details/recipe-details.component'
).then((m) => m.RecipeDetailsComponent),
canActivate: [authGuard],
},
{ {
path: 'log', path: 'log',
loadComponent: () => loadComponent: () =>
@ -72,6 +101,10 @@ const routes: Routes = [
(m) => m.ChangelogComponent (m) => m.ChangelogComponent
), ),
}, },
{
path: '**',
redirectTo: 'dashboard',
},
], ],
}, },
]; ];

View file

@ -19,7 +19,12 @@ export class UserService {
.asObservable() .asObservable()
.pipe(distinctUntilChanged()); .pipe(distinctUntilChanged());
public isAuthenticated = this.currentUser.pipe(map((user) => !!user)); public isAuthenticated = this.currentUser.pipe(
map((user) => !!user),
tap((isAuth) => {
console.log('Change auth', isAuth);
})
);
constructor( constructor(
private readonly http: HttpClient, private readonly http: HttpClient,

View file

@ -1,4 +1,5 @@
import { Component } from '@angular/core'; import { Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { environment } from 'src/environments/environment'; import { environment } from 'src/environments/environment';
@Component({ @Component({
@ -20,8 +21,12 @@ import { environment } from 'src/environments/environment';
standalone: true, standalone: true,
}) })
export class GoogleButtonComponent { export class GoogleButtonComponent {
constructor(private route: ActivatedRoute) {}
loginWithGoogle(): void { loginWithGoogle(): void {
const returnUrl = this.route.snapshot.queryParams['redirectUrl'] || '/';
// redirect to google login in server // redirect to google login in server
window.location.href = environment.api + '/auth/google'; window.location.href =
environment.api + '/auth/google' + '?redirect_to=' + returnUrl;
} }
} }