Question

我正在尝试创建一个用于检查用户角色的中间件。

// middleware/is-admin.js
export default function (context) {
  let user = context.store.getters['auth/user']

  if ( user.role !== 'admin' ) {
    return context.redirect('/errors/403')
  }
}

在我的.vue文件中，我将其放在：

middleware: [ 'is-admin' ]

有效。

现在，我想检查用户是否还有其他角色。因此，我创建了一个新的中间件：

// middleware/is-consultant.js
export default function (context) {
  let user = context.store.getters['auth/user']

  if ( user.role !== 'consultant' ) {
    return context.redirect('/errors/403')
  }
}

在我的.vue文件中：

middleware: [ 'is-admin', 'is-consultant' ]

不幸的是，当我这样做时，如果我以管理员角色访问该路由，则该路由不再起作用。

您能告诉我如何创建一个使用Nuxt.js检查多个角色的中间件吗？

谢谢！

Answer 1

您可以在Nuxt中使用此功能

export default function ({ $auth, redirect }) {
  if (!$auth.hasScope('admin')) {
    return redirect('/')
  }
}

范围可以是您想要的任何内容，例如顾问，编辑器等。

检查documentation

已更新

由于您正在使用Laravel 您可以在用户表中有一个角色列例如

$table->enum('role', ['subscriber', 'admin', 'editor', 'consultant', 'writer'])->default('subscriber');

然后创建一个API资源，查看documentation了解更多

要创建用户资源，请运行此工匠

php artisan make:resource UserResource

然后在您的资源中，您可以拥有类似的内容

public function toArray($request)
{
    return [
        'id' => $this->id,
        'name' => $this->name,
        'email' => $this->email,
        'phone' => $this->phone,
        'gender' => $this->gender,
        'country' => $this->country,
        'avatar' => $this->avatar,
        'role' => $this->role,
   ];    
}

然后您可以将其导入到您的控制器中

use App\Http\Resources\UserResource;

您可以像这样获得资源

            $userdata = new UserResource(User::find(auth()->user()->id));
            return response()->json(array(
                'user' => $userdata,
            ));

在Nuxt中

在Nuxt中进行身份验证

安装nuxt auth和axios

Using YARN : yarn add @nuxtjs/auth @nuxtjs/axios
Or using NPM: npm install @nuxtjs/auth @nuxtjs/axios

然后将它们注册到您的nuxtconfig.js

modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth',
  ],

在您的nuxtconfig.js中，也添加

  axios: {
    baseURL: 'http://127.0.0.1:8000/api'
  },

auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: '/login', method: 'post', propertyName: 'access_token' },
          logout: { url: '/logout', method: 'post' },
          user: { url: '/user', method: 'get', propertyName: false }
        },
        tokenRequired: true,
        tokenType: 'Bearer',
        globalToken: true
        // autoFetchUser: true
      }
    }
  }

URL是终结点

检查Documentation了解更多

将Nuxt中的某些页面限制为特定用户。 >创建一个middlweare例如isadmin.js

然后添加此

export default function ({ $auth, redirect }) {
  if (!$auth.hasScope('admin')) {
    return redirect('/')
  }
}

然后转到页面，添加中间件

export default {
  middleware: 'isadmin'

Answer 2

这个想法是每个页面都有其权限级别。然后，在中间件中，您可以将当前用户权限级别与当前页面权限级别进行比较，如果较低，则重定向用户。 Nuxt.js创建者提出的非常优雅的解决方案。 GitHub issue。

<template>
  <h1>Only an admin can see this page</h1>
</template>

<script>
export default {
  middleware: 'auth',
  meta: {
    auth: { authority: 2 }
  }
}
</script>

然后在您的middleware/auth.js中：

export default ({ store, route, redirect }) => {
  // Check if user is connected first
  if (!store.getters['user/user'].isAuthenticated) return redirect('/login')

  // Get authorizations for matched routes (with children routes too)
  const authorizationLevels = route.meta.map((meta) => {
    if (meta.auth && typeof meta.auth.authority !== 'undefined')
      return meta.auth.authority
    return 0
  })
  // Get highest authorization level
  const highestAuthority = Math.max.apply(null, authorizationLevels)

  if (store.getters['user/user'].details.general.authority < highestAuthority) {
    return error({
      statusCode: 401,
      message: 'Du måste vara admin för att besöka denna sidan.'
    })
  }
}

如何在Nuxtjs中创建用于检查角色的中间件

2 个答案:

已更新

在Nuxt中