如何使用Rails api和nuxt js创建有效的登录名

时间:2019-07-13 18:45:39

标签: devise jwt nuxt.js rails-api

我正在使用Nuxt Js和Rails Api构建网站。我的Rails api使用devise-jwt gem进行身份验证,并且可以在邮递员中正常工作。我在标头中收到带有承载令牌的响应。问题是我无法弄清楚如何使用Nuxt应用程序进行设置。我知道nuxt具有$ auth模块,该模块具有诸如登录和注销之类的方法,由于某些原因,这些方法仍然有效,但我仍然不了解$ auth的工作方式。

我将向您展示我的应用到目前为止可以做什么

登录时,请尝试... 开机自检http://localhost:8080/api/v1/users/sign_in 与电子邮件并传递到正文中

然后我收到一个json响应以及邮递员中的这些标头

{
    "id": 1,
    "email": "test@test.com",
    "name": "David",
    "last_name": "Cantu",
    "username": "davidcantum",
    "created_at": "2019-03-21T18:29:09.494Z",
    "updated_at": "2019-03-21T18:29:09.494Z"
}

标题

Location →/
Content-Type →application/json; charset=utf-8
Authorization →Bearer eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxIiwic2NwIjoidXNlciIsImF1ZCI6bnVsbCwiaWF0IjoxNTYzMDQyNzIyLCJleHAiOjE1NjMxMjkxMjIsImp0aSI6IjdkOTE2YTg2LTM5MjEtNGY3My1hMmM0LTExNGU1Mzc3MGUwMyJ9.ortrSW8NPtHqtWfu1SFfNZoGEuS7tw9NHUd4kNW66y4
ETag →W/"77633a3c23a2ffcea1bdf28cbb86a42e"
Cache-Control →max-age=0, private, must-revalidate
X-Request-Id →dff8218d-32f6-43b5-983f-2f4d9b40d8d4
X-Runtime →0.371214
Vary →Origin
Transfer-Encoding →chunked

这就是我在nuxt项目中拥有的东西

nuxt.config.js

auth: {
    redirect: {
      login: '/login',
      logout: '/',
      callback: '/login',
      home: '/'
    },
    strategies: {
      local: {
        endpoints: {
          login:  { url: '/users/sign_in', method: 'post', propertyName: 'token' },
          logout: { url: '/users/sign_out', method: 'delete' },
          user:   { url: '/me', method: 'get', propertyName: 'data' }
        },
        tokenRequired: true,
        tokenType: 'Bearer'
      }
    }
},
axios: {
    baseURL: 'http://127.0.0.1:8080/api/v1',
},

在auth配置中,您看到我有一个用户:.. / me,当我尝试登录时,我认为它尝试从api获取/ me,但是该路线要求您登录才能进入,目前无法正常工作。

这也是我尝试登录的方法

async login() {
      try {
        await this.$auth.loginWith("local", {
          data: {
            user: {
              email: this.form.getFieldValue("email"),
              password: this.form.getFieldValue("password")
            }
          }
        });
        this.$toast.success("Logged In!");
      } catch (e) {
        this.$toast.error("Error while authenticating");
      }
    }

当我输入电子邮件和密码并尝试登录时,我调试了此方法,如果尝试了此方法。$ auth.state.loggedIn这是真的!我不知道为什么:(

它确实在rails后端中创建了一个jwt,但是当我尝试向需要授权的API发出另一个请求时,例如对groups控制器的请求,它将无法正常工作,我不确定如何设置这些标头。事实是我正在看nuxtjs auth模块的文档,但是我猜这部分我没有解释吗?

更新: 我决定使用网守作为身份验证。集成起来很容易。

0 个答案:

没有答案