Base solution for your next web application
Starts in:
01 DAYS
01 HRS
01 MIN
01 SEC
Open Closed

make some angular modules/pages anonymous #3639


User avatar
0
malomatia created

hi we need to make specific angular component available for public without login , for example having /app/custom/my-component does'nt require login, while the rest of the application requires login.

is there a straight forward way to do this ?

Thank You !


20 Answer(s)
  • User Avatar
    0
    alirizaadiyahsi created

    Hi,

    There are already examples in project under src/account. You can take this as an example.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @malomatia,

    To be more specific, you can modify this typescript file to allow anonymous access to a specific route <a class="postlink" href="https://github.com/aspnetzero/aspnet-zero-core/blob/master/angular/src/app/shared/common/auth/auth-route-guard.ts">https://github.com/aspnetzero/aspnet-ze ... e-guard.ts</a>.

    Thanks.

  • User Avatar
    0
    squaresunion created

    Hello I have the same problem making page anonymous. Honestly I've looking at the account module for 3 hours now I still dont see what makes it anounymous. I create a module inside the app folder without any restriction it looks like no matter what you create in that folder can not be access to anonymous users. If I change the default route to one of my page the app is just looping infinitly. So can anybody really provide help on this? Please ?

  • User Avatar
    0
    aaron created
    Support Team

    If I change the default route to one of my page the app is just looping infinitely.

    Did you register the route to your page in main-routing.module.ts?

    children: [
        { path: 'dashboard', component: DashboardComponent, data: { permission: 'Pages.Tenant.Dashboard' } }
    ]
    

    I still don't see what makes it anonymous.

    In the above, you can see that 'dashboard' has permission. Compare this to account-routing.module.ts:

    children: [
        { path: 'login', component: LoginComponent },
        { path: 'register', component: RegisterComponent },
        // ...
    ]
    

    More examples in admin-routing.module.ts.

  • User Avatar
    0
    squaresunion created

    so modifying file auth-route-guard.ts is not enough. I redirected to a page insinde app main module but I have an error saying user was not logged in and the app is redirecting the route to login page automatically.

    Can we have direction how to create an anonymous page in main module please?

  • User Avatar
    0
    squaresunion created

    <cite>aaron: </cite>

    If I change the default route to one of my page the app is just looping infinitely.

    Did you register the route to your page in main-routing.module.ts?

    children: [
       { path: 'dashboard', component: DashboardComponent, data: { permission: 'Pages.Tenant.Dashboard' } }
    ]
    

    yes here is my module

    { path: 'home', loadChildren: 'app/home/home.module#HomeModule', //Lazy load Home module data: { preload: true } },

    I still don't see what makes it anonymous.

    In the above, you can see that 'dashboard' has permission. Compare this to account-routing.module.ts:

    children: [
       { path: 'login', component: LoginComponent },
       { path: 'register', component: RegisterComponent },
       // ...
    ]
    

    More examples in admin-routing.module.ts.

  • User Avatar
    0
    squaresunion created

    and in my home module I have this

    const routes: Routes = [{ path: '', children: [ { path: 'aboutus', component: AboutUsComponent }, etc...

    so accessing aboutus should be free but still requires login. I dont understand

  • User Avatar
    0
    aaron created
    Support Team

    Did you register the routes for your module in app-routing.module.ts?

  • User Avatar
    0
    squaresunion created

    <cite>aaron: </cite> Did you register the routes for your module in app-routing.module.ts?

    no I did not. Everything is created in the main module therefore routes are created in the main-routing.module.ts Is it possible to have anything anonymous in it? If yes how to proceed?

  • User Avatar
    0
    squaresunion created

    <cite>aaron: </cite> Did you register the routes for your module in app-routing.module.ts?

    so in the app routing module I have this }, { path: 'main', loadChildren: 'app/main/main.module#MainModule', //Lazy load main module data: { preload: true } }, and in my main module I have this { path: 'home', loadChildren: 'app/home/home.module#HomeModule', //Lazy load Home module data: { preload: true } }, there is no permission on it as you can see

  • User Avatar
    0
    squaresunion created

    <cite>aaron: </cite>

    If I change the default route to one of my page the app is just looping infinitely.

    Did you register the route to your page in main-routing.module.ts?

    children: [
       { path: 'dashboard', component: DashboardComponent, data: { permission: 'Pages.Tenant.Dashboard' } }
    ]
    

    yes here is my module

    { path: 'home', loadChildren: 'app/home/home.module#HomeModule', //Lazy load Home module data: { preload: true } },

    I still don't see what makes it anonymous.

    In the above, you can see that 'dashboard' has permission. Compare this to account-routing.module.ts:

    children: [
       { path: 'login', component: LoginComponent },
       { path: 'register', component: RegisterComponent },
       // ...
    ]
    

    More examples in admin-routing.module.ts.

  • User Avatar
    0
    squaresunion created

    is it because on those pages I am displaying the menu and other default control like user settings dropdown button or something?

  • User Avatar
    0
    aaron created
    Support Team

    How about home-routing.module.ts?

  • User Avatar
    0
    squaresunion created

    <cite>aaron: </cite> How about home-routing.module.ts?

    here it is

    const routes: Routes = [{ path: '', children: [ { path: 'aboutus', component: ---------------------------------}, { path: 'termsandconditions', component: ----------------------------------}, { path: 'privacypolicy', component: -------------------------------------}, { path: 'pickuplocation', component: ----------------------------------------}, { path: 'faq', component: -------------------------------}, { path: 'cookypolicies', component: -----------------------------}, { path: 'contact', component: -----------------------------------} ] }];

    dots are replacing the names of the components

  • User Avatar
    0
    aaron created
    Support Team

    Is there any error in the console?

  • User Avatar
    0
    squaresunion created

    no errors my friend :) everything is fine when I loggon I can everything good

  • User Avatar
    0
    squaresunion created

    Did some investiguations if you go to auth-route-guard.ts and deactivate login page as fall back page if user is not logging the app goes to my about us page as expected but there is an error in the header component saying it coudlnt find the information of the current user and so on. So definetly I think this is happening because I have the header component in my pages and to have thoses pages displayed properly I need to remove header from them.

    Pretty sure thats the issue. So now how to do it....next episode...

  • User Avatar
    0
    squaresunion created

    <cite>aaron: </cite> Is there any error in the console?

    this this.appSession.getShownLoginName(); in the header component required the user to be logged on. If current user is not logged on page wont renderer. So I have to create my page outside the app folder.

  • User Avatar
    0
    squaresunion created

    its working! it was basically because of the header bar component. U have to be logged in if you want it to work otherwise it will force your app to go to the login page. you also have to modify the auth-route-guard.ts file as well. Hum Aspbnet Zero should make the template evolve. if user is not logging then header bar should not try to display user information or display something like "login" like it is in ASp.net by default. :evil: Now I have to do it myself.

    Thanks for you help aaron.

  • User Avatar
    0
    alper created
    Support Team

    thanks @aaron for the help. @SquaresUnion you shouldn't use header in your anonymous pages. In that case you have to create your own layout like in login page.