トークンとユーザーをvueとセッションで保存してください。

Question

認証システムを作ろうとしました。すべてがうまくいっても小さな問題ですが、ユーザーはページを更新するたびに切断されます。私はセッションでトークンとユーザーをどうにかして保存したと思いますが、どうしたらよいか分かりません。

全プロジェクトはここにある：Github

// Token setup 
function jwtSignUser(user) { 
    const ONE_WEEK = 60 * 60 * 24 * 7; 
    return jwt.sign(user, process.env.JWT_SECRET, { 
    expiresIn: ONE_WEEK 
    }); 
} 

私はデータを送信する方法

// Successfuly logged in 
    if (response) { 
     return res.send({ 
     user: existingUser.toJSON(), 
     token: jwtSignUser(existingUser.toJSON()) 
     }); 
    } 

ソリューション：私はこの問題を解決し 、あなたはここで最終的なプロジェクトを見つけることができます Github

トークンをlocalStに保存する方法を変更しましたオラージ

Answer 1

問題はしかし、あなたがリフレッシュを行う場合は、ストアが実際に格納されていないあなたは、メモリ内のトークンを格納していることのようだ、とないのlocalStorage

https://github.com/gnome1337/coworking-lab/blob/Authentification/client/src/store/store.js#L15

state.token = token

localStarageになります。ここには良い書き込みがあります：https://auth0.com/blog/build-an-app-with-vuejs/これを達成するのに役立ちます。記事、またはtl; drを読んでください。下...

// src/auth/index.js 

import {router} from '../index' 

// URL and endpoint constants 
const API_URL = 'http://localhost:3001/' 
const LOGIN_URL = API_URL + 'sessions/create/' 
const SIGNUP_URL = API_URL + 'users/' 

export default { 

    // User object will let us check authentication status 
    user: { 
    authenticated: false 
    }, 

    // Send a request to the login URL and save the returned JWT 
    login(context, creds, redirect) { 
    context.$http.post(LOGIN_URL, creds, (data) => { 
     localStorage.setItem('id_token', data.id_token) 
     localStorage.setItem('access_token', data.access_token) 

     this.user.authenticated = true 

     // Redirect to a specified route 
     if(redirect) { 
     router.go(redirect)   
     } 

    }).error((err) => { 
     context.error = err 
    }) 
    }, 

    signup(context, creds, redirect) { 
    context.$http.post(SIGNUP_URL, creds, (data) => { 
     localStorage.setItem('id_token', data.id_token) 
     localStorage.setItem('access_token', data.access_token) 

     this.user.authenticated = true 

     if(redirect) { 
     router.go(redirect)   
     } 

    }).error((err) => { 
     context.error = err 
    }) 
    }, 

    // To log out, we just need to remove the token 
    logout() { 
    localStorage.removeItem('id_token') 
    localStorage.removeItem('access_token') 
    this.user.authenticated = false 
    }, 

    checkAuth() { 
    var jwt = localStorage.getItem('id_token') 
    if(jwt) { 
     this.user.authenticated = true 
    } 
    else { 
     this.user.authenticated = false  
    } 
    }, 

    // The object to be passed as a header for authenticated requests 
    getAuthHeader() { 
    return { 
     'Authorization': 'Bearer ' + localStorage.getItem('access_token') 
    } 
    } 
}