【ロピタルの学習記録　2/25】RailsとNuxtでユーザ管理機能

今日は学校でプレゼン大会がありましたが思った以上に面白いテーマで楽しませてもらいました！そして明日、明後日はガイダンスの予定だったのですが、中止になりました＼(^o^)／

しっかりとなにやるかだけ決めておこう。晴れてたら宮島にでも行こうかな〜🍁

Nuxt

さて、Nuxtですが、今日は開発中のWebアプリでフロントからRailsAPIを叩き、ユーザ管理をするシステムの初歩部分ができました。簡単に、何をやったか説明すると、

  1. 新規登録画面からRailsAPIにフォーム入力したものを投げる
  2. 成功したら、メール確認画面へリダイレクト
  3. ログイン画面へ
  4. ログイン画面からログインしたらマイページでユーザ情報表示

みたいな感じです。具体的なコードはこんな感じ

store/index.js↓

import axios from 'axios'
// const cookieparser = process.server ? require('cookieparser') : undefined

export const state = () => {
  return {
    access_token: null,
    uid: null,
    id: ''
  }
}
export const mutations = {
  setUser (state, res) {
    state.access_token = res.headers['access-token']
    state.uid = res.data.data.uid
    state.id = res.data.data.id
    // state.client
  }
}

export const actions = {
    async login ({ commit }, { email, password }) {
      try {
        await axios.post('http://localhost:3000/api/v1/auth/sign_in', { email, password }
        ).then(res => {
            console.log(res)
            // console.log(res.data.data.uid)
            commit('setUser', res)
        })
      } catch (error) {
        if (error.response && error.response.status === 401) {
          throw new Error('Bad credentials')
        }
        throw error
      }
    },
  
  }

pages/user/login.vueのscript部分下

data: () => ({
        showPassword: false,
        password: "",
        email: "",
        rules: {
          required: value => { return !!value || 'Required.'  },
          min: value => { return value.length >= 8 || 'Min 8 characters'} ,
        }
    }),
    methods: {
        async login() {
            try {
                console.log("vrav")
                await this.$store.dispatch('login', {
                  email: this.email,
                  password: this.password
                })
                Cookie.set("access-token", this.$store.state.access_token)
                this.$router.push(`/user/${this.$store.state.id}`)
            } catch (e) {
                this.formError = e.message
                console.log(this.formError)
            }
        },
  }

でもまだ、全然問題点ばかりで、その回避の方法もわかっていないので手探りしながらインプットをしないといけない状態です。現在見つかっている問題点は、ページをリロードすると404エラーが出るという問題です。

これは、Nuxtのユニバーサルアプリケーションの場合に起きるエラーです。

Nuxtで作成できるアプリは３つあります。静的ページとSPAとユニバーサルです。

ja.nuxtjs.org

ユニバーサルは初回アクセス時はサーバ上でAPIからデータを取ってきたりして、一つのページを生成します。そしてリンクを踏んで移動する時は、ブラウザからAPIを叩き、データを取ってきます。こんな動作をするユニバーサルアプリですが、初回アクセス時は、動的ルートが生成されないみたいです。具体的にはuser/_id.vueなどのファイルです

Nuxtのドキュメントを読んだ感じ、generateの設定にルートをあらかじめ設定して生成するようにしておけば良いみたいですが、このやり方だと、レスポンスタイムが遅くなる気がして、まだ実装していません。動的ルートを使うアプリケーションは多いはずなのに検索してみた感じ解決策もあまり見つからないので、現在模索中です


あと、バリデーションと認可、そしてリクエストヘッダにaccess-tokenに加えあと二つの情報を付加する必要もあります。多分他に色々出てきそう...ぴょえん

Vue

今日はVueの基本的な部分をドキュメントで見直しました。Vueの特性、目的、基本的なディレクティブ、コンポーネントあたりです。偏頭痛が途中からひどくなってきてリタイアしました

jp.vuejs.org

明日

インプット

アウトプット

  • Nuxt: ユーザ管理機能中盤

早くユーザ管理機能を完璧に実装したい！コツコツと完成させていきます。できれば今週中に終わらせたい... おやすみなさい😴