前端vue3+ts+localStorage登录token持久化

store.js

import { Commit, createStore } from 'vuex'
import axios from 'axios';

export interface UserProps {
    isLogin: boolean;
    nickName?: string;
    _id?: string;
}
export interface GlobalDataProps {
    token: string;
    user: UserProps;
}
const store = createStore<GlobalDataProps>({
    state: {
        token: localStorage.getItem('token') || '',
        user: { isLogin: false }
    },
    mutations: {
        //获取token
        login(state, rawData) {
            //1.获取token
            const { token } = rawData.data
            state.token = token
            localStorage.setItem('token', token)
            //2.设置header token
            axios.defaults.headers.common.Authorization = `Bearer ${token}`
         },
         //获取用户登录信息
         fetchCurrentUser(state, rawData) {
            state.user = { isLogin: true, ...rawData.data }
         },
     },
    actions: {
        //登录操作
        login({ commit }, payload) {
            return postAndCommit('/user/login', 'login', commit, payload)
        },
        //通过token获取用户信息
        async fetchCurrentUser({ commit } ) {
            const { data } = await axios.get('/user/current')
            commit('fetchCurrentUser', data)
        },
        //组合actions
        loginAndFetch({ dispatch }, loginData) {
            return dispatch('login', loginData).then(() => {
                return dispatch('fetchCurrentUser')
            })
        },
    },
}
export default store

Login.vue

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex'

export default defineComponent({
    name: 'Login',

    setup() {

        const router = useRouter()
        const store = useStore()
        
        //监听点击事件
        const onFormSubmit = (result: boolean) => {
            if(result) {
                const payload = {
                    email: emailVal.value,
                    password: passwordVal.value
                }
                //触发
                store.dispatch('loginAndFetch', payload).then(data => {
                    console.log(data)
                    router.push('/')//跳到首页去
                })
            }
        }
        return {
            emailVal,
            passwordVal,
            onFormSubmit,
        }
    },
})
</script>

App.vue

<script lang="ts">
import { defineComponent, computed, onMounted} from 'vue'
import { useStore } from 'vuex'
import { GlobalDataProps } from './store'
export default defineComponent({
    name: 'App',
    setup() {
        const store = useStore<GlobalDataProps>()
     
        //防止登录后刷新页面 重新获取用户信息 做到持久化登录状态
        onMounted(() => {
            const token = store.state.token
            if(token) {
                store.dispatch('fetchCurrentUser')
            }
        })
        const currentUser = computed(() => {
            return store.state.user
        })

        return {
            currentUser,
            
        }
    }
})
</script>