Open suzy1031 opened 3 years ago
routing error
('/')
以外の画面でリロードするとroutesエラーになる
routesの設定がおかしい?
Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/".
※udemyのプロジェクトで同じ処理使っていたかもしれないので確認する
→URLを直叩きした時や、ログイン状態でログイン画面
へ行こうとした場合、ログインしていないのにRecord画面
へ行こうとした場合などの為に設定が必要
ナビゲーションガード
参考 同じエラーのissue vue側の問題だと思う historyモードのせい? SPAにありがちな更新処理を行うと404になっちゃう問題(VueとHeroku版) SPA を開発する際に必須のタスクの一つとして、History APIのフォールバックがある。
historyモードを解除することでリロード問題はクリア
URLに#
が含まれてしまうのでhistoryモード
でリロード問題を解消する
postするとPOST http://localhost:5000/api/studies 500 (Internal Server Error)
事象
.then
の処理へ入らないで抜けてしまう参考
axios.postの際に500 server errorが出た時の原因突き止め方
この記事を参考にして開発者ツールのnetworkを確認してみる studiesの選択 > Responseを確認
# 以下のエラーが発生している
"undefined method `study_url' for #<Api::StudiesController:0x00007fd31bd71cc0>"
リダイレクト先の指定方法が良くない
location: study
# これだとrailsは以下のURLを返そうとする
study_url
# vue.jsのrouter.jsで定義しているURL
/Record
create
アクションは200 ok
だが、その後のリダイレクト処理でサーバ(rails)側からリダイレクト先のhtmlが返って来ない為、500 server error
を返していた
this is an API and there is no real redirecting, but the default Rails responder doesn't know that. It also doesn't know about your routing namespaces.
Rails does not understand your route namespaces when inferring the route, so it attempts hotel_url - a route which does not exist!
これで500 server error
は解消
画面がリロードされずデータが更新されていない
# Record.vue
# この処理ができていない
this.$router.go({path: this.$router.currentRoute.path, force: true})
修正
-this.study.push(response.data)
+let e = response.data
this.$router.go({path: this.$router.currentRoute.path, force: true})
画面がリロードされてデータが更新されるようになった
↓
ver2.0以降で再びリロードできないエラーが発生
# 学習時間の登録後の画面遷移
# 以下の箇所を修正して試してみる(PC chromeは動作する)
-this.$router.go({path: this.$router.currentRoute.path, force: true})
+this.$router.go({ name: 'Record' })
参考 teratrail =>リロードされず
#studies_controller
-study = current_user.studies.build(study_params)
+study = current_user.studies.new(study_params)
=>リロードされず
#studies_controller
private
def study_params
-params.require(:study).permit(:time, :total, :user_id)
+params.require(:study).permit(:time, :total).merge(user_id: current_user.id)
end
=>リロードされず
ajax通信で反映させる => わざわざリロードさせなくてもaxiosを使っていればajax通信してくれているのでデータを非同期で取得できるはず ※タイポしていただけ?
-let e = response.data
-this.study.push(response.data)
+this.studies.push(response.data)
-this.$router.go({path: this.$router.currentRoute.path, force: true})
signupエラーメッセージ表示
user_controller.rb
~~省略~~
render json: { error: user.errors.full_messages.join(' ') }, status: :unprocessable_entity
~~省略~~
# Signup.vue
<template>
+<div class="common-error-message" v-if="error">{{ error }}</div>
</template>
<script>
export default {
data() {
+error: ''
}
}
</script>
メールの一意チェックのバリデーションが有効になりエラーメッセージが表示される パスワード確認用が間違っていた場合のバリデーションが有効になりエラーメッセージが表示される
sign upするとlogin('/')にリダイレクトされてエラー
vue-router.esm.js:1943 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location: "/".
遷移先パスを変更
# SignUp.vue
signupSuccessful(response){
-this.$router.replace('/')
+this.$router.replace('/record')
}
ログイン状態で'/'に遷移するとduplicateエラーが発生
# Login.vue
checkSignedIn() {
if (localStorage.signedIn) {
-this.$router.replace('/')
+this.$router.replace('/record')
}
}
# Signup.vue
checkSignedIn() {
if (localStorage.signedIn) {
-this.$router.replace('/')
+this.$router.replace('/record')
}
}
課題
共通
エラーメッセージのfont-size、color、position'api/v1/studies'
ページにて一定時間過ぎると、データが取得できなくなってしまう(ログアウトすれば正常に戻る)スマホchromeにて登録ボタン押下後にページがリロードしないLog In
未登録のemailでログインしようとするとエラーメッセージが表示されない401(Unauthorized)エラーの時はNot Authorizedのエラーメッセージが出るが、404(Not Found)の時はコンソールにしかエラーメッセージが表示されないSign Up
一意チェック→422(Unprocessable Entity)エラー時に「既に登録されているEメールです」のメッセージ表示Record
user_idを保存完了
共通
Sign Up Email →hoge@hoge.comのメール形式の際のエラーメッセージ →バリデーション Password →422(Unprocessable Entity)エラー→タグに
required="required"
を追加 Password comfirmation →422(Unprocessable Entity)エラー→タグにrequired="required"
を追加