Base solution for your next web application
Open Closed

Add an public page to Angular site without Authorization #10670

User avatar
0
rvanwoezik created

ASP.NET CORE & Angular (single solution) .NET 5.0 v10.2.0

Hi, instead of the seperate public site i would like to add a public available page without users have to login first, to the Angular site.

So when users are not authorized i want them to go to a new public landing page in Angular site, and when they want more direct them to the account login page

I was thinking about making a new folder in the root of the src folder besides 'app' and 'account' and name it public

do i have to alter the appguard? is this possible? can you give me some pointers how to do it?

Kind Regards, Rene van Woezik

Go to accepted answer
12 Answer(s)
  • User Avatar
    0
    smry created

    Your idea is how I did exactly what you're asking with one exception - "...and name it public..." - I wouldnt use 'public' as a folder identifier but that's just my personal preference

    look at account-routing.module.ts file - based on what you said your expected result is, you're just going to have to modify that page as well as the account.component.html accordingly

    Depending on how closely you want to integrate your new page changes where you chose to bounce out of the application to go to the other page you're referring to

    First thing you might need to look into is possibly root-routing.module.ts - that's usually where I've been adding that functionality and then adding my modules and components under src/{here} I think to save time you can consider copying the entire DIR 'account' and ripping out about 90% of it so you're just left with:

    1. landing-route-guard.ts
    2. landing-routing.module.ts
    3. landing.component.html
    4. landing.component.ts
    5. landing.module.ts

    and then modify root-routing to just be:

     {
        path: 'account',
        loadChildren: () => import('account/account.module').then(m => m.AccountModule), //Lazy load account module
        data: { preload: true }
    },
    {
        path: 'landing',
        loadChildren: () => import('landing/landing.module').then(m => m.LandingModule), //Lazy load landing module
        data: { preload: true }
    },

    set a breakpoint on the canActivate method in your new Landing route guard to verify expected behavior

    1
  • User Avatar
    0
    rvanwoezik created

    Thnx!

    'landing' is much better then 'public'

    Is it possible i can take a look at a copy of sourcecode of your angular site?

    Kind regards, Rene van Woezik [email protected]

  • User Avatar
    0
    smry created

    I wouldn't feel confortable with that, but you don't need it really

    Just follow this:

    1. copy src\account in that same directory
      • You should now have src\account - Copy directory
    2. Rename account - Copy to landing
      1. Rename src/landing/account-routing.module.ts file
      2. Rename account.component.html and account.component.ts accordingly
        1. Add your code here for that landing page
      3. Rename src/landing/auth/account-route-guard.ts file
        1. Update selectBestRoute() method to fit your needs
        2. Review line 20 to fit your needs
          1. This is if you plan on integrating actions on your new landing page to tenan
      4. Update root-routing.module.ts to have a 'landing' new route path
  • User Avatar
    0
    rvanwoezik created

    Thnx, working on it now!

  • User Avatar
    0
    rvanwoezik created

    @smry, Besides auth, I dont'need the other sub dir's right?

  • User Avatar
    0
    smry created

    I have not done it in a while but reviewing contents of the Account directory, yes - you should only need that one file out of the auth directory - and all the others (email-activation, login, password, and shared) are not needed for what you are doing

  • User Avatar
    0
    ismcagdas created
    Support Team

    Thanks a lot @smry for sharing your solution :).

  • User Avatar
    0
    rvanwoezik created

    What i don't get at this moment, is when you go to localhost:4200 and you are not logged in you go to : http://localhost:4200/account/login

    but i want to redirect when you are nog logged in to http://localhost:4200/landing

    Where do i do this?

  • User Avatar
    1
    rvanwoezik created

    found it! auth-route-guard.ts

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @rvanwoezik

    Did you implement this ? Can we close the issue ?

  • User Avatar
    0
    bdadmin created

    Can you share what you changed in the auth-route-guard.ts file to get the landing page working without logging in?

    Thanks!

  • User Avatar
    0
    rvanwoezik created 
     if (!this._sessionService.user) {
            let sessionObservable = new Subject<any>();

            this._refreshTokenService.tryAuthWithRefreshToken()
                .subscribe(
                    (autResult: boolean) => {
                        if (autResult) {
                            sessionObservable.next(true);
                            sessionObservable.complete();
                            location.reload();
                        } else {
                            sessionObservable.next(false);
                            sessionObservable.complete();
                            this._router.navigate(['/landing']);
                        }
                    },
                    (error) => {
                        sessionObservable.next(false);
                        sessionObservable.complete();
                        this._router.navigate(['/landing']);
                    }
                );
            return sessionObservable;
        }

    In src folder i have created a landing folder with a landing component

    Hope this helps, Kind regards, Rene van Woezik

Assignee
No one
Labels
None yet