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

【问题标题】：How to implement role based aurelia routing如何实现基于角色的 aurelia 路由
【发布时间】：2016-09-09 05:15:12
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

然后，当您创建导航模板时，您将希望根据角色和导航项显示。

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

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

showNav(navItem) {
  return localStorage.getItem("role") === navItem.role;
}

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

Blog Post on Aurelia-Auth

Aurelia-Authentication documentation

【讨论】：

【解决方案2】：

受 Saqib 的回答启发，我制作了一个（非 ts）简单的基于角色的导航的要点。

也许它会帮助某人：aurelia role-based routing

【讨论】：

【解决方案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;
}

【讨论】：