Как получить данные локального хранилища и установить маршрут по умолчанию для перенаправления в angular 7?

Question

    import { NgModule, OnInit } from '@angular/core';
    import { RouterModule, Routes } from '@angular/router';
    import { AuthGuardService } from './../providers';
    import { AdminComponent } from './../admin/admin.component';
    import { DashboardComponent } from './../admin/dashboard/dashboard.component';
    import { LoginComponent } from './../admin/login/login.component';

    import { CreateivrComponent } from '../share/createivr/createivr.component';
    import { CalllogComponent } from '../share/calllog/calllog.component';   
    //  canActivate: [AuthGuardService],
    var roles: [];
    var starting_url='users';
    roles = JSON.parse(localStorage.getItem('adminroles')); 
    if(roles!=null){
     if(roles.includes('View_Users_List')){
         starting_url="users";
     }
     else if(roles.includes('View_Request_List')){
         starting_url="request";
     }
     else if(roles.includes('View_Billing_List')){
         starting_url="billing";
     }

     else if(roles.includes('View_Android_List')){
         starting_url="android";
     }
     else{
         starting_url="users";
     }


    }




    const routes: Routes = [
    { path: 'login', component: LoginComponent },
    {
        path: '', canActivate: [AuthGuardService], component: AdminComponent,
        children: [
            { path: 'dashboard', component: DashboardComponent },
            { path: '', redirectTo: starting_url, pathMatch: 'full' },
            { path: 'users', loadChildren: './users/users.module#UsersModule' },
            { path: 'request', loadChildren: './request/request.module#RequestModule' },
            { path: 'android', loadChildren: './android/companylist.module#CompanylistModule' },
            { path: 'billing', loadChildren: './billing/billing.module#BillingModule' },
            { path: 'subadmin', loadChildren: './subadmin/subadmin.module#SubadminModule' },
            { path: 'createivr', component: CreateivrComponent },
            { path: 'calllog/:id', component: CalllogComponent },
            { path: 'createivr/:userid', component: CreateivrComponent },
            { path: 'editivr/:id/:userid', component: CreateivrComponent },

        ]
    }
    ];

    @NgModule({
    exports: [RouterModule],
    imports: [RouterModule.forChild(routes)]
    })

    export class AdminRouting { }

Есть ли способ? У меня есть роли в местном хранении. Итак, я хочу получить значение localalstorage и установить значение маршрута по умолчанию в angular7, как это может помочь кому-нибудь? Я новичок в angular и nodejs, поэтому, пожалуйста, помогите всем, пожалуйста, посмотрите выше мой файл углового маршрутизатора.

Answer 1

Файл маршрутизатора используется для настройки возможных маршрутов. Я бы порекомендовал поместить фактическую маршрутизацию по умолчанию в функцию ngOnInit вашего компонента Login. Таким образом, внутри этой функции вы извлекаете значение роли из локального хранилища, а затем переходите к маршруту в зависимости от значения. Затем измените пустой путь для перенаправления на компонент входа. Затем добавьте имя пути для AdminComponent. Это может быть все, что вам подходит, но я использовал «admin» в приведенном ниже примере.

const routes: Routes = [
{ path: '', redirectTo: 'login', pathMatch: 'full' },
{ path: 'login', component: LoginComponent },
{
  path: 'admin', canActivate: [AuthGuardService], component: AdminComponent,
    children: [
        { path: 'dashboard', component: DashboardComponent },
        { path: 'users', loadChildren: './users/users.module#UsersModule' },
        { path: 'request', loadChildren: './request/request.module#RequestModule' },
        { path: 'android', loadChildren: './android/companylist.module#CompanylistModule' },
        { path: 'billing', loadChildren: './billing/billing.module#BillingModule' },
        { path: 'subadmin', loadChildren: './subadmin/subadmin.module#SubadminModule' },
        { path: 'createivr', component: CreateivrComponent },
        { path: 'calllog/:id', component: CalllogComponent },
        { path: 'createivr/:userid', component: CreateivrComponent },
        { path: 'editivr/:id/:userid', component: CreateivrComponent },

    ]
}];

Так что теперь, когда пользователь переходит на ваш сайт с пустым путем, он будет перенаправлен на компонент входа в систему. Компонент входа в систему проверит значение локального хранилища и, если у него есть доступ, перенаправит на соответствующий компонент.