[英]Angular 2 Admin navigation/routes separate from Client side navigation/routes
I know Angular 2 likes to use a single navigation to switch between pages. 我知道Angular 2喜欢使用单个导航在页面之间进行切换。 My issue is that the admin navigation is completely different than client facing navigation.
我的问题是管理员导航与面向客户的导航完全不同。
My goal is to have an admin and all of its routes run separate from the client side and all of its routes. 我的目标是让管理员及其所有路由与客户端及其所有路由分开运行。
For example: If you go the root page, or the /video page, you deal with client side routers and navigation. 例如:如果您进入根页面或/ video页面,则需要处理客户端路由器和导航。 If you go to /admin or /admin/client, you deal with only the admin side routers and navigation.
如果转到/ admin或/ admin / client,则仅处理管理端路由器和导航。
Is this even possible with Angular 2/4? 使用Angular 2/4甚至可能吗?
If so, can you point me to some advantageous reading? 如果是这样,您能指出我一些有益的读物吗?
Thanks. 谢谢。
Here is a possible solution using basic routing and a guard to guard specific routes for admin priviledges only. 这是一个可能的解决方案,它使用基本路由和防护来保护仅用于管理员权限的特定路由。
In your routing config you will define the two main routes /user
& /admin
. 在您的路由配置中,您将定义两个主要路由
/user
和/admin
。 You can then define child routes for those two main routes where they will extend off the parent route (example /admin/dashboard
or /user/account
) 然后,您可以为这两个主要路由定义子路由,它们将从父路由延伸出去(例如
/admin/dashboard
或/user/account
)
You can then regulate who has access to those routes based on a user role or whatever you decide. 然后,您可以根据用户角色或您决定的内容,来控制谁有权访问这些路由。 If you're storing user details in local storage, you can also store the users roles.
如果要将用户详细信息存储在本地存储中,则还可以存储用户角色。
Below is an untested example. 以下是未经测试的示例。 I have comments inside the code blocks with a little explanation.
我在代码块中有一些解释的注释。 I've also supplied a few links to write ups on routing and guards.
我还提供了一些链接来撰写有关路由和防护的文章。 Hopefully this helps a bit.
希望这会有所帮助。
app.routing.ts
import { NgModule } from '@angular/core';
import { AdminComponent } from './admin.component';
import { AdminDashboardComponent } from './admindashboard.component';
import { UserAccountComponent } from './useraccount.component';
import { UserComponent } from './user.component';
import { RoleGuard } from './role.guard';
const appRoutes: Routes = [
{
path: 'user',
canActivateChild: [RoleGuard], // <-- This guard will run before the router directs you to the route
data: { roles : ['ROLE_USER'] }, // <-- Current Login in user must have role user. You can access this array inside your guard.
children: [
{
path: '', // <-- This should equal /user
component: UserComponent,
pathMatch: 'full'
},
{
path: 'account', // <-- This should equal /user/account
component: UserAccountComponent,
pathMatch: 'full'
}
// <-- The rest of your user routes
]
},
{
path: 'admin',
canActivateChild: [RoleGuard], // <-- This guard will run before the router directs you to the route
data: { roles : ['ROLE_ADMIN'] }, // <-- Current Login in user must have role admin
children: [
{
path: '',
redirectTo: '/admin/dashboard' // <-- Redirects to dashboard route below
},
{
path: 'dashboard',
component: AdminDashboardComponent,
pathMatch: 'full'
}
// <-- The rest of your admin routes
]
}
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes, { useHash: true })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
role.guard.ts
import { Injectable } from '@angular/core';
import { Router, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
@Injectable()
export class RoleGuard implements CanActivateChild {
constructor(
private router: Router
) {}
canActivateChild(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
const userRoles: string[] = this.authService.getRoles(); // <--------- get the current user's roles
const routeRoles: string[] = route.data['roles']; // <------- Will get the roles arry you defined in your router config
/*
Now you can do your logic to determine if the user has the appropriate role.
If they do return true
Else use router to set a redirect route to /user url or whereever you feel like and return false;
*/
}
}
Angular Router http://blog.angular-university.io/angular2-router/
Angular路由器http://blog.angular-university.io/angular2-router/
Angular Child Routes https://angular-2-training-book.rangle.io/handout/routing/child_routes.html
角子路线https://angular-2-training-book.rangle.io/handout/routing/child_routes.html
Angular CanActivateChild https://angular.io/api/router/CanActivateChild
Angular CanActivateChild https://angular.io/api/router/CanActivateChild
More on routing https://blog.thoughtram.io/angular/2016/06/14/routing-in-angular-2-revisited.html
有关路由的更多信息https://blog.thoughtram.io/angular/2016/06/14/routing-in-angular-2-revisited.html
You can have routing set up in multiple places, including specialised routing modules. 您可以在多个位置设置路由,包括专用路由模块。
You can then import multiple routing modules in another root module for example. 例如,您可以在另一个根模块中导入多个路由模块。
Please refer to the documentation which gives you loads of examples with all the possible configurations: angular routing module 请参考文档,其中提供了所有可能配置的示例示例: 角形布线模块
Edit 编辑
From the angular docs, here is how one would set up an angular routing module for certain paths. 从角度文档中,这是如何为某些路径设置角度路由模块的方法。
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HeroListComponent } from './hero-list.component';
import { HeroDetailComponent } from './hero-detail.component';
const heroesRoutes: Routes = [
{ path: 'heroes', component: HeroListComponent },
{ path: 'hero/:id', component: HeroDetailComponent }
];
@NgModule({
imports: [
RouterModule.forChild(heroesRoutes)
],
exports: [
RouterModule
]
})
export class HeroRoutingModule { }
And this is how this is imported in another module: 这就是将其导入另一个模块的方式:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { HeroListComponent } from './hero-list.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroService } from './hero.service';
import { HeroRoutingModule } from './heroes-routing.module';
@NgModule({
imports: [
CommonModule,
FormsModule,
HeroRoutingModule
],
declarations: [
HeroListComponent,
HeroDetailComponent
],
providers: [ HeroService ]
})
export class HeroesModule {}
You can create several routing modules and import them in other modules as you wish. 您可以创建几个路由模块,然后根据需要将它们导入其他模块。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.