1 14.退出功能实现

• 封装弹窗提示

// src/composables/util.js

import { ElNotification, ElMessageBox } from 'element-plus'

export function showModal(content="提示内容", type="warning", title=""){
    return ElMessageBox.confirm(
        content, 
        title,
        {
            confirmButtonText: "确认",
            cancelButtonText: "取消",
            type,
        }
    )
}

• 退出接口

// src/api/manager.js
export function logout() {
    return axios.post("/admin/logout")
}

• store 管理退出

// src/sore/index.js
actions: {
    ...略
        // 退出登录
        logout({ commit }) {
            // 移除 cookie 里的 token
            removeToken()

            // 清除当用用户状态, vuex
            commit('SET_USERINFO',{})

        }
}

• 页面组件

// src/pages/index.vue

<template>
    <div>
        后台首页

        {{ $store.state.user.username }}

        <el-button @click="handleLogout">退出登录</el-button>
    </div>
</template>

<script setup>
import { logout } from "~/api/manager"
import { showModal,toast } from "~/composables/util"
import { useRouter } from "vue-router"
import { useStore } from "vuex"


const store = useStore()
const router = useRouter()

function handleLogout(){
    showModal("是否要退出登录？").then(res=>{
        logout()
        .finally(()=>{
            // 退出
            store.dispatch('logout')
            // 跳转回登录页
            router.push('/login')
            // 提示退出登录成功
            toast('退出登录成功')
        })
    })
}

</script>