Vue.jsでセッションCookieベースの認証を実装する方法は?

登録

ローリングセッション認証を備えたnode.js(エクスプレス、パスポート)アプリケーションがあります。

アプリケーションは非常にシンプルで、セッションのCookieを返すlogin-passwordと、認証でのみ使用できるいくつかのAPI関数があります。

そのアプリケーションのフロントエンドとしてVue.jsを使用したいのですが、Vueでそのような認証を実装する方法に関する信頼できるドキュメントやガイドを見つけることができません。JWTに重点が置かれているようです。Vueで行うことさえ可能ですか?

Axiosを使用して認証関数を呼び出すだけで試しました

<script>
    import router from "../router"    
    import axios from "axios"    
    export default {    
        name: "Login",    
        methods: {    
            login: (e) => {    
                e.preventDefault()    
                let email = "[email protected]"   
                let password = "password"    
                let login = () => {    
                    let data = {    
                        email: email,    
                        password: password    
                    }    
                    axios.post("/srv/login", data)    
                        .then((response) => {
                            router.push("/loginpage")    
                        })    
                        .catch((errors) => {    
                            console.log("Failed to log in")    
                        })    
                }    
                login()    
            }    
        }    
    }
</script>

これはログインに関しては機能しますが、このAPIを呼び出した後にセッションを保存するにはどうすればよいですか?返されたCookieを処理し、最も重要なこととして、アプリ自体の状態を認証済みにする方法を教えてください。

IVO GELOV

フロントエンド部分(Vue)では何もする必要はありません-すべてがバックエンドによって行われます。

JWTの場合とほぼ同じように実行しますが、本文の一部としてトークンを返す代わりに、トークンをCookieに入れます。

const SECRET_KEY = '123456789'
const expiresIn = '30min'

// Create a token from a payload
function createToken(payload)
{
  return jwt.sign(payload, SECRET_KEY, { expiresIn })
} 

app.post('/login', (req, res, next) =>
{
  const { username, password } = req.body
  const userID = isAuthenticated({ username, password });
  if (userID === 0)
  {
    const status = 401
    const message = 'Incorrect username or password'
    res.status(status).json({ status, message })
    return
  }
  const accessToken = createToken({ id: userID })
  res.cookie('sessionCookieName', accessToken, {httpOnly: true})
  res.status(200).json({ success: true })
}; 

次に、他の各APIエンドポイントは、Cookieからのトークンを検証する必要があります。

// Verify the token
function verifyToken(token)
{
  return jwt.verify(token, SECRET_KEY)
}

app.get('/getArticle', (req, res, next) =>
{
  var cookie = req.cookies.sessionCookieName;
  try
  {
    verifyToken(cookie)
    next()
  }
  catch (err)
  {
    const status = 401
    const message = 'Unauthorized'
    res.status(status).json({ status, message })
  } 
});

次の記事も読むことができます。

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

vueアプリケーションにPaypalサブスクリプションを実装する方法は?

分類Dev

(Vuetify.jsを使用して)Vueアプリに検証付きのシンプルなフォームを実装する方法は?

分類Dev

axios(vue.js)で動的認証ヘッダーを使用する方法は?

分類Dev

symfonyベースのRESTAPIとVue.jsフロントエンドでXSS防止を実装する場所

分類Dev

Vue2でデバウンスを実装する方法は?

分類Dev

Vue.jsで配列プロパティのサブセクションをページ分割する方法は?

分類Dev

vue jsでストライプからカード要素を実装する特定の方法はありますか?

分類Dev

JavaScript(Vue.js)を使用してJavaアプリケーション(ゲーム)をWebサイトに実装する方法はありますか

分類Dev

VueでCSSアニメーションをリセットする方法

分類Dev

vue.jsで選択したオプションのインデックスを取得する方法

分類Dev

vue3でデバウンスを実装する方法

分類Dev

ElmでVueのトランジショングループ機能を実装するにはどうすればよいですか?

分類Dev

ブートストラップ内で Vue.js を使用してイベントを発行する方法は?

分類Dev

私のvue.jsアプリケーションは、テキスト入力を入力するとテーマの色をリセットします。テーマの色を維持するにはどうすればよいですか?

分類Dev

Vue.jsでリストの並べ替えをアニメーション化する方法

分類Dev

Vue.js 2.0のv-modelにフォーマットを実装する適切な方法は何ですか

分類Dev

vue.js:「SimpleState Management from Scratch」アプローチを実装する場合、ストアを渡す/アクセスする方法は?

分類Dev

[eslint] 'value'の取得には値が割り当てられますが、vue.jsフルスタックアプリケーションでjoi検証を使用する場合は使用されません。

分類Dev

agグリッドのセル内の要素にイベントリスナーを追加する方法(jsまたはjquery、angularではなく、reactjsではなく、vueではない)

分類Dev

Vue.jsに渡す前に、PHPセッションからPHPの文字列にスペースを使用してJSONをエンコードする

分類Dev

Vue.jsでページネーションの複数のインスタンスを使用する

分類Dev

VueとJavaEEを使用してWebアプリケーションにチャットシステムを実装するにはどうすればよいですか?

分類Dev

Vue.js [vuex]ミューテーションからディスパッチする方法は?

分類Dev

Vue.jsでトランジションをトリガーする方法

分類Dev

Vue.js クラスバインディングで現在の要素の属性を確認する方法は?

分類Dev

Vue.jsの異なるルータービュー間でアニメーションを実行することはできません

分類Dev

Vue.jsで選択オプションを取得する方法

分類Dev

Vueは、認証が検証されるまでページのレンダリングを防止します

分類Dev

vue.jsの特定のhtmldiv要素のスクリーンショットを撮る方法

Related 関連記事

  1. 1

    vueアプリケーションにPaypalサブスクリプションを実装する方法は?

  2. 2

    (Vuetify.jsを使用して)Vueアプリに検証付きのシンプルなフォームを実装する方法は?

  3. 3

    axios(vue.js)で動的認証ヘッダーを使用する方法は?

  4. 4

    symfonyベースのRESTAPIとVue.jsフロントエンドでXSS防止を実装する場所

  5. 5

    Vue2でデバウンスを実装する方法は?

  6. 6

    Vue.jsで配列プロパティのサブセクションをページ分割する方法は?

  7. 7

    vue jsでストライプからカード要素を実装する特定の方法はありますか?

  8. 8

    JavaScript(Vue.js)を使用してJavaアプリケーション(ゲーム)をWebサイトに実装する方法はありますか

  9. 9

    VueでCSSアニメーションをリセットする方法

  10. 10

    vue.jsで選択したオプションのインデックスを取得する方法

  11. 11

    vue3でデバウンスを実装する方法

  12. 12

    ElmでVueのトランジショングループ機能を実装するにはどうすればよいですか?

  13. 13

    ブートストラップ内で Vue.js を使用してイベントを発行する方法は?

  14. 14

    私のvue.jsアプリケーションは、テキスト入力を入力するとテーマの色をリセットします。テーマの色を維持するにはどうすればよいですか?

  15. 15

    Vue.jsでリストの並べ替えをアニメーション化する方法

  16. 16

    Vue.js 2.0のv-modelにフォーマットを実装する適切な方法は何ですか

  17. 17

    vue.js:「SimpleState Management from Scratch」アプローチを実装する場合、ストアを渡す/アクセスする方法は?

  18. 18

    [eslint] 'value'の取得には値が割り当てられますが、vue.jsフルスタックアプリケーションでjoi検証を使用する場合は使用されません。

  19. 19

    agグリッドのセル内の要素にイベントリスナーを追加する方法(jsまたはjquery、angularではなく、reactjsではなく、vueではない)

  20. 20

    Vue.jsに渡す前に、PHPセッションからPHPの文字列にスペースを使用してJSONをエンコードする

  21. 21

    Vue.jsでページネーションの複数のインスタンスを使用する

  22. 22

    VueとJavaEEを使用してWebアプリケーションにチャットシステムを実装するにはどうすればよいですか?

  23. 23

    Vue.js [vuex]ミューテーションからディスパッチする方法は?

  24. 24

    Vue.jsでトランジションをトリガーする方法

  25. 25

    Vue.js クラスバインディングで現在の要素の属性を確認する方法は?

  26. 26

    Vue.jsの異なるルータービュー間でアニメーションを実行することはできません

  27. 27

    Vue.jsで選択オプションを取得する方法

  28. 28

    Vueは、認証が検証されるまでページのレンダリングを防止します

  29. 29

    vue.jsの特定のhtmldiv要素のスクリーンショットを撮る方法

ホットタグ

アーカイブ