258 Adding Auto Logout

步骤

1、更新auth下的几个文件

actions.js

let timer;

export default {
    async login(context, payload) {
        context.dispatch('auth',{
            ...payload,
            mode: 'login'
        });
    },
    async signup(context, payload) {
        context.dispatch('auth',{
            ...payload,
            mode: 'signup'
        });
    },
    async auth(context, payload) {
        const mode = payload.mode;
        let url = 'http://localhost:5216/api/Users/Login';
        if (mode === 'signup') {
            url = 'http://localhost:5216/api/Users/PostUser';
        }
        const response = await fetch(url, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                //id: context.getters.userId,
                email: payload.email,
                password: payload.password,
                returnSecureToken: true
            })
        });

        const responseData = await response.json();

        if (!response.ok) {
            const error = new Error(responseData.message || 'Failed to authenticate.');
            throw error;
        }

        console.log(responseData);

        //const expiresIn = +responseData.expiration * 1000; //to milliseconds
        const expiresIn = 1000 * 60 * 10; //for testing only, 10 minutes
        const expirationDate = new Date().getTime() + expiresIn;

        localStorage.setItem('token', responseData.token);
        localStorage.setItem('userId', responseData.userId);
        localStorage.setItem('tokenExpiration', expirationDate);

        timer = setTimeout(() => {
            context.dispatch('autoLogout');
        }, expiresIn);

        context.commit('setUser', {
            token: responseData.token,
            userId: responseData.userId,
            // tokenExpiration: expirationDate,
        });
    },
    tryLogin(context) {
        const token = localStorage.getItem('token');
        const userId = localStorage.getItem('userId');
        const tokenExpiration = localStorage.getItem('tokenExpiration');

        const expiresIn = +tokenExpiration - new Date().getTime(); 

        if (expiresIn <= 0) {
            context.dispatch('autoLogout');
            return;
        }

        timer = setTimeout(() => {
            context.dispatch('autoLogout');
        }, expiresIn);

        if (token && userId) {
            context.commit('setUser', {
                token: token,
                userId: userId,
                // tokenExpiration: null
            });
        }
    },
    logout(context) {
        localStorage.removeItem('token');
        localStorage.removeItem('userId');
        localStorage.removeItem('tokenExpiration');

        clearTimeout(timer);

        context.commit('setUser', {
            token: null,
            userId: null,
            // tokenExpiration: null
        });
    },
    autoLogout(context) {
        context.dispatch('logout');
        context.commit('setAutoLogout');
    }
}

getters.js

export default {
    userId(state) {
        return state.userId;
    },
    isAuthenticated(state) {
        return !!state.token;
    },
    didAutoLogout(state) {
        return state.didAutoLogout;
    }
}

index.js

import actions from "./actions.js";
import getters from "./getters.js";
import mutations from "./mutations.js";

import { v4 as uuidv4 } from "uuid";


export default {
    state() {
        return {
            //userId: '51564311-D841-498F-BBCB-629A44CC2F7C',
            userId: uuidv4(),
            token: null,
            tokenExpiration: null,
            didAutoLogout: false,
        }
    },
    actions,
    getters,
    mutations,
}

mutations.js

export default {
    setUser(state, payload) {
        state.token = payload.token;
        state.userId = payload.userId;
        //state.didAutoLogout = false;
        // state.tokenExpiration = payload.tokenExpiration;
    },
    setAutoLogout(state) {
        state.didAutoLogout = true;
    },
}

2、App.vue

<template>
  <the-header></the-header>
  <router-view v-slot="slotProps">
    <transition name="route" mode="out-in">
      <component :is="slotProps.Component"></component>
    </transition>
  </router-view>
</template>

<script>
import TheHeader from "./components/layout/TheHeader.vue"

export default {
  components: {
    TheHeader,
  },
  created() {
    this.$store.dispatch("tryLogin");
  },
  computed: {
    didAutoLogout() {
      return this.$store.getters.didAutoLogout;
    }
  },
  watch: {
    didAutoLogout(curValue, oldValue) {
      if (curValue && curValue !== oldValue) {
        this.$router.replace('/coaches');
      }
    }
  },
};

</script>

<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

* {
  box-sizing: border-box;
}

html {
  font-family: "Roboto", sans-serif;
}

body {
  margin: 0;
}

.route-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.route-leave-to {
  opacity: 0;
  transform: translateX(30px);
}

.route-enter-active {
  transition: all 0.3s ease-out;
}

.route-leave-active {
  transition: all 0.3s ease-in;
}

.route-enter-to,
.route-leave-from {
  opacity: 1;
  transform: translateX(0);
}
</style>