BETA

【Sinatra】Vue.jsとaxiosを使ってjsからログアウトする

投稿日:2019-11-26
最終更新:2019-11-26

Vue.jsとaxiosを使って、ログアウトの機能を設定してみます。

*参考
https://github.com/axios/axios/issues/736

やること

axiosからログアウトのメソッドを投げる
確認ダイアログを表示して処理を進める

ボタンの設置

test.erb

      <div id="app_button_logout" >   
        <a  v-on:click="app_logout" class="dropdown-item" method="POST">logout</a>  
      </div>  

ボタンはv-on:click を使います。

コントローラ

ログアウトのメソッドだけ記述してます。

app.rb

  post '/logout' do  
    session.clear  
    redirect '/'  
  end  

jsコード

test.js

var logout_id = '49'  
var app_button_logout = new Vue({  
  el: "#app_button_logout",  
  data () {  
    return {  
      info: null  
    }  
  },  
  methods: {  
    app_logout :function() {  
      axios.post('/session/logout')  
      .then(res => {  
        alert("ログアウト完了");  
      })  
      .catch(error => {  
        alert("ログアウト失敗");  
      });  
    }  
  }})  

ログイン状態にあるユーザのidを変数に設定して、その変数を'/session/logout' に渡しているイメージです。
これでログアウト機能は整いました。

確認ダイアログをつける

色々調べましたがこれが一番シンプルかなってっていうコードを付け足します。

*参考
https://www.sejuku.net/blog/28217

モーダルっていうおしゃれなダイアログもありましたが、コードが長くなるのでここでは差し控えます。

test.js

var result = window.confirm('ログアウトしましすか?');  
if(result){      
      {console.log('ログアウトする')}  
}else  
      {console.log('ログアウトしない')}  
    }  

window.confirm では はい/いいえ のダイアログが出現するので、はい を選択した場合はresult にtrueが格納され、次の処理に続きます。これを先ほど実装したログアウト機能にあてはめましょう。

test.js

var logout_id = '49'  
var app_button_logout = new Vue({  
  el: "#app_button_logout",  
  data () {  
    return {  
      info: null  
    }  
  },  
  methods: {  
    app_logout :function() {  
      var result = window.confirm('ログアウトしましすか?');  
      if(result){  
        axios.post('/session/logout')  
        .then(res => {  
          console.log(axios.post)  
          console.log(params)  
        })  
        .catch(error => {  
          console.log(error);  
          console.log(axios.post)  
        });  
    }else  
      {console.log('ログアウトしない')}  
    }  
  }})  

これで、確認ダイアログも実装できました!!!

ページが変わらない!!

このままのコードではログアウト状態にはなりますが、ページがそのまま残ってる状態で保持されます。
ページ遷移をするコードを付け足しましょう。
test.js

var logout_id = '49'  
var app_button_logout = new Vue({  
  el: "#app_button_logout",  
  data () {  
    return {  
      info: null  
    }  
  },  
  methods: {  
    app_logout :function() {  
      var result = window.confirm('ログアウトしましすか?');  
      if(result){  
        axios.post('/session/logout')  
        .then(res => {  
     location.reload();  
          console.log(axios.post)  
          console.log(params)  
        })  
        .catch(error => {  
          console.log(error);  
          console.log(axios.post)  
        });  
    }else  
      {console.log('ログアウトしない')}  
    }  
  }})  

まとめ

Sinatraに確認ダイアログの機能がサポートされてないので、ログアウトやレコードの削除の場合にアラートを出すにはどうしたらいいかかなり悩んでました。
寄り道しながら調べてたら知識も増えて成長を実感できました!!

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

初学者の成長が垣間見れます

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう