在管理面板中更改用户角色答案

【问题标题】：Change User Role in Admin Panel在管理面板中更改用户角色
【发布时间】：2019-02-20 15:52:12
【问题描述】：

我正在创建一个管理面板，我可以在其中使用alanning:roles 时通过选择控件更改用户角色。我遇到的问题是我无法获取与每个选择控件关联的用户。我在使用 Meteor 创建管理面板时引用了 this tutorial，但是当我调用 changeRoles 方法时，控制台返回此错误：

原始问题：已解决

Error: Missing 'users' param
I20190218-14:59:27.319(-6)?     at Object._updateUserRoles (packages/alanning_roles.js:684:23)
I20190218-14:59:27.319(-6)?     at Object.setUserRoles (packages/alanning_roles.js:250:11)
I20190218-14:59:27.320(-6)?     at MethodInvocation.changeRole (server/main.js:88:13)`

更改的代码来自：

Template.userHome.events({
    'click #confirmChanges': function (event) {

        let currentRole = $(event.target).find('option:selected').val();
        let userId = $(event.target.id).val();
        console.log(userId);
        if (window.confirm("Change User Roles?")) {
            Meteor.call("changeRole", {
                role: currentRole,
                user: userId
            })
            window.location.reload();
        }
    }
})

对此（更改我设置 userId 值的方式）：

Template.userHome.events({
    'change [name="userRole"]': function (event) {

    let currentRole = $(event.target).find('option:selected').val();
    let userId = $(event.target.id);
    console.log(currentRole);
    if (window.confirm("Change User Roles?")) {
        Meteor.call("changeRole", {
            role: currentRole,
            user: userId
        })
        window.location.reload();
    }
}

})

现在，Roles.setUserRoles() 不起作用，但参数有值 console.log(options.role) 返回正确的值和

console.log(options.user) 返回：

I20190219-20:37:37.527(-6)? { length: 0,
I20190219-20:37:37.528(-6)?   prevObject: 
I20190219-20:37:37.529(-6)?    { length: 0,
I20190219-20:37:37.529(-6)?      prevObject: 
I20190219-20:37:37.529(-6)?       { length: 0,
I20190219-20:37:37.530(-6)?         prevObject: [Object],
I20190219-20:37:37.530(-6)?         context: [Object],
I20190219-20:37:37.531(-6)?         selector: '3FzfDhZWcGFg6ggTE' },
I20190219-20:37:37.531(-6)?      context: { location: [Object] } },
I20190219-20:37:37.532(-6)?   context: 
I20190219-20:37:37.532(-6)?    { location: 
I20190219-20:37:37.532(-6)?       { href: 'http://localhost:3000/userHome',
I20190219-20:37:37.533(-6)?         ancestorOrigins: {},
I20190219-20:37:37.533(-6)?         origin: 'http://localhost:3000',
I20190219-20:37:37.534(-6)?         protocol: 'http:',
I20190219-20:37:37.534(-6)?         host: 'localhost:3000',
I20190219-20:37:37.534(-6)?         hostname: 'localhost',
I20190219-20:37:37.534(-6)?         port: '3000',
I20190219-20:37:37.535(-6)?         pathname: '/userHome',
I20190219-20:37:37.535(-6)?         search: '',
I20190219-20:37:37.536(-6)?         hash: '' } } }

客户代码：

Template.userHome.events({
    'change [name="userRole"]': function (event) {

        let currentRole = $(event.target).find('option:selected').val();
        let userId = $(event.target.id);
        console.log(currentRole);
        if (window.confirm("Change User Roles?")) {
            Meteor.call("changeRole", {
                role: currentRole,
                user: userId
            })
            window.location.reload();
        }
    }
})

服务器代码：

Meteor.methods({
  changeRole( options ) {
    console.log("Change User is Being Called");
    try {
      Roles.setUserRoles( options.user, [ options.role ] );
      console.log(options.role)
    } catch( exception ) {
      console.log(exception);
    }
  }
});

用户主页模板

<div class="nav">
    <p class="welcomeUser">Welcome, {{#with userInfo}}{{profile.firstname}} {{profile.lastname}}{{/with}}</p>

    <button id="logout" class="universalButton">Log Out</button>


</div>
<div class="pageContent">



    {{#if userIsAdmin}}
    <div class="adminPanel">
        <table id="userTable">
            <caption>Admin Panel</caption>
            <tr>
                <th class="usertableHead">Username</th>
                <th class="usertableHead">Role</th>
            </tr>
            {{#each users}}
            <tr>
                <td class="usertableData">{{username}}</td>
                <td class="usertableData">
                    <div class="styled-select purple rounded">
                        <select id={{_id}} name="userRole">
                            <option value={{roles}}>{{roles}}</option>
                            <option value="Teacher">Teacher</option>
                        </select>
                    </div>
                </td>
            </tr>
            {{/each}}
        </table>
        <button id="confirmChanges" class="universalButton">Confirm Changes</button>
    </div>
    {{/if}}
</div>

【问题讨论】：

你能在服务器上得到options.user吗？在将其传递给Roles.setUserRoles 之前，尝试对其进行控制台记录。另外，如果您能向我们展示userHome 模板html，将会很有帮助。
我更新了设置最初未定义的用户值的方式，以使用 let userId = $(event.target.id).val(); 从事件中获取值然后是用户：userId，但我的值仍然不确定@SudheerJami
我也确实通过调用更改选择元素的方法解决了原始问题，但现在我意识到我的 Roles.setUserRoles() 不起作用。
你能用最新的代码更新问题吗？谢谢
更新的代码和问题现在是 event.target.id 值返回一个对象，因此不是有效的参数@SudheerJami

标签： meteor alanning-roles

【解决方案1】：

console.log(options.user) 应该打印用户的_id，而不是 jQuery 对象。在您的 change [name="userRole"] 事件中，将 let userId = $(event.target.id); 替换为 let userId = event.target.id;

分配和检索值的更好方法如下：

HTML：

...
  <select data-id={{_id}} name="userRole">
       <option value={{roles}}>{{roles}}</option>
       <option value="Teacher">Teacher</option>
  </select>
...

JS：

Template.userHome.events({
    'change [name="userRole"]': function (event) {
        let userId = event.target.dataset.id;
        let currentRole = event.target.value;
        console.log(userId, currentRole);
        ...
    }
})

【讨论】：