完善登录功能

获取用户信息后跳转到后台页 但是刷新页面后信息就没了

放入actions中获取

  actions:{
    // 获取当前登录页面信息
    actionGetInFo( {commit} ){
        return new Promise((resolve,reject) => {
          getInfo().then(res => {
            commit("SET_USERINFO",res)
            resolve(res)
          }).catch(err => reject(err))
        })
    }
  }

在permission中

router.beforeEach(async (to,from,next) => {
    const token = getToken()

    // 没有登录，强制跳转回登录页
    if(!token && to.path != "/login"){
      toast("请您先登录","error")
      return next('/login')
    }
    // 防止用户重复登录 登陆后又进入登录页
    if(token && to.path == "/login"){
      toast("请勿重复登陆","error")
      return next({ path:from.path ? from.path : "/"})
    }

    // 如果用户登录了 自动获取用户信息 并放在vuex中
    if(token){
      await store.dispatch("actionGetInFo")
    }
    next()
})

store. index.js中

import { createStore } from "vuex";
import { login , getInfo } from '@/api/manager'
import { setToken } from "@/composables/auth"
const store = createStore({
  state() {
    return{
      // 用户信息
      user:{}
    }
  },
  mutations:{
    // 记录用户信息
    SET_USERINFO(state,user){
        state.user = user
        console.log(state.user);
    }
  },
  actions:{
    // 登录方法
    actionLogin( {commit} , { username,password }){
        return new Promise((resolve,reject) => {
          login(username,password).then(res => {
              setToken(res.token)
              resolve(res)
          }).catch(err => {
              reject(err)
          })
        })
    }, 
    // 获取当前登录页面信息
    actionGetInFo( {commit} ){
        return new Promise((resolve,reject) => {
          getInfo().then(res => {
            commit("SET_USERINFO",res)
            resolve(res)
          }).catch(err => reject(err))
        })
    }
  }
})

export default store

login.vue 很简洁

const onSubmit = () => {
  // validate对整个表单的内容进行验证。 接收一个回调函数，或返回 Promise
  formRef.value.validate((valid) => {
    if (!valid) {
      return false
    }
    loading.value = true
    store.dispatch('actionLogin', form).then(res=>{
      toast("恭喜！登陆成功!","success")
      router.push('/')
    }).finally(()=>{
      loading.value = false
    })
  })
}

// 监听回车事件
function onKeyUp(e){
  if(e.key == "Enter") onSubmit()
}

// 添加键盘监听 页面加载完毕后
onMounted(() => {
  document.addEventListener("keyup",onKeyUp)
})
// 页面卸载前
onBeforeUnmount(() => {
  document.removeEventListener("keyup",onKeyUp)
})