0

我正在尝试为 oidc-client 开发一个与 nuxt 一起使用的插件，因为 @nuxtjs/auth 不适用于我的身份提供者。基本上一切正常，唯一的问题是我需要向组件添加一个自定义属性并在中间件中访问它以检查是否启用了身份验证。我一直在寻找其他插件以获得指导，这就是我最终得到的：

插件/用户管理器.ts

export default (context: Context, inject: Inject) => {
  if (context.ssrContext) return
  const userManager = new UserManager({
    client_id: 'test',
    authority: 'https://ouath.test.net',
    automaticSilentRenew: true,
    response_type: 'code',
    scope: 'openid email phone role user',
    redirect_uri: 'http://localhost:4200/login/authorize',
    post_logout_redirect_uri: 'http://localhost:4200',
    silent_redirect_uri: window.location.origin + '/silent-refresh.html'
  });
  inject('auth', userManager);
  context.$axios.onRequest(config => {
    return userManager.getUser().then(user => {
      if (user && user.access_token)
        config.headers.Authorization = 'Bearer ' + user?.access_token;

      return config
    });
  });
}

中间件/auth.ts

import {Context} from '@nuxt/types';

export default async function (context: Context) {
  if (context.ssrContext) return
  console.log(context)
  if (context.app.auth === false) return
  const user = await context.$auth.getUser()
  if (!user || user.expired) {
    await context.$auth.signinRedirect()
  }
}

示例组件

import axios from "axios"
export default {
  auth: false,
  components: {
  },
  data() {
    return {
      items: [],
      cards: []
    };
  },
  mounted() {

  },
};

问题在于，在中间件中， if (context.app.auth === false) return 行总是返回 true，因为 context.app.auth 是 undefiend，但组件中有 auth: false 属性。如何从中间件访问 auth 属性？

4

1 回答 1

1

您可以在中间件中使用以下内容来查看用户是否已登录。

export default async ({ app, store }) => {
  if (!store?.$auth?.$state?.loggedIn) {
    // write something to do if he is not logged in
  }
}

不确定这auth: false部分。如果您想绕过对类似页面jobs或about页面的身份验证的需要，则使用此选项。

编辑，对不起，如果我的回答不够完整并且我错过了几点。所以，这里有几点：

  • nuxt/auth可以完全管理任何类型的后端身份验证，您不会被卡住Auth0, Discord, Facebook, Github, Google, Laravel，您可以使用自己的 JWT或自己的 OAuth 2解决方案。它本质上只是一个辅助工具，用于避免管理中间件的身份验证状态等。
  • 如果您打算不使用nuxt/auth，则可以放弃，auth: false因为这基本上是在说“不要在此处使用给定的 [nuxt/auth] 中间件”，如此处所述
  • 您无法访问组件的数据，因为中间件在创建任何组件之前运行，如Nuxt 的客户端生命周期所示
  • 您可以使用自己的解决方案和自制的中间件，但使用 Vuex 并拥有isLoggedIn您寻找的全局状态可能会更好
  • 如果您想使用自己的自定义命名中间件，也就是您的命名中间件auth.ts，您可能只需要middleware: 'authenticated'在您的.vue组件中编写（不确定 TS 是否需要在此处进行更多配置）
于 2021-06-26T10:37:37.377 回答