Question

我将所有路由放在一个.ts文件中，而我的main.ts将进入第一个路由，即登录该路由文件。我不想加载左侧菜单，并在授权后，我将路由到客户或支持成员。我必须根据给定的角色填充左侧菜单中的路线。如何实施他的情景？

Answer 1

我根据Saqib的答案启发了一个简单的基于角色的导航（非ts）的要点。

Answer 2

Aurelia中的导航基于您传递给路由器配置的一组javascript对象。没有任何东西不允许您扩展这些对象以包含有关角色的其他信息。所以你应该能够添加一个角色字段。

Object.keys(this.props.classes).map((value, key) => {
   return <option key={key}>{value}</option>
 }

然后，当您创建导航模板时，您将要根据角色和导航项目进行展示。

{
  route: ['', 'todo/list'],
  name: 'ToDoList',
  moduleId: './to-do/list',
  nav: true,
  title: 'To Do List',
  authRoute: true,
  role: 'TaskAdmin'
}

需要包含在相应js代码文件中的函数：

<li repeat.for="navItem of router.navigation" class="${showNav(navItem) ? 'showNav' : 'hideNav'}">
  <a href.bind="row.href">${row.title}</a>
<li>

有几种方法可以设置身份验证，甚至包括构建自己的身份验证的能力，但我会指出一些。

Blog Post on Aurelia-Auth

Aurelia-Authentication documentation

Answer 3

这是我的工作：使用ValueConverter过滤导航栏中的项目，以便根据角色显示/隐藏它们。值过滤器过滤掉不应显示的导航栏项目。

export class AuthorizedValueConverter {
    toView(routes: Array<string>, select: Array<string>) {
        if (select && select.length > 0) {
            return routes.filter((route: any) => {

                if (route.config.roles) {
                    return route.config.roles.some((role: string) => {
                        return select.indexOf(role) > -1;
                    });
                } else
                    return [];
            });
        }
        else
            return [];
    }
}

导航栏：

app.html

<li repeat.for="row of router.navigation  | authorized: roles " class="${row.isActive ? 'active' : ''} nav-item">
    <a class="nav-link" href.bind="row.href">${row.title}</span></a>
</li>

然后，您只需要在ViewMode中公开角色：

app.ts：

//This is used by the navigation bar to filter out roles that the user is not authorized to view
get roles() {
    return this.accountService.currentUser.appRoles;
}

如何实现基于角色的aurelia路由

3 个答案: