使用vue3+ts+vite从零开始搭建bolg(四)：登录_vite+vue3+ts登录界面

四、登录

4.1登录页面的静态搭建

在views的login下搭建好静态页面即可

在根目录下的index.html可以修改图标和网页名

注意:这里要删除style.css文件。并去除main的引用

4.2仓库搭建

在src下建立如图文件夹

在store中的index中定义pinia

import { createPinia } from 'pinia'
 
let pinia = createPinia()
 
export default pinia

 在main.ts里注册

//pinia
import pinia from '@/store'
 
app.use(pinia)

在modules的user中创建user仓库

import { defineStore } from 'pinia'
 
let useUserStore = defineStore('User', {
    state: ()=> {
        return {
            
        }
    },
    actions: {
        
    }
})
 
export default useUserStore

4.3登录token存储

在actions里编写异步登录，并存储token

import { loginForm, loginResponseData } from '@/api/user/type'
import { login} from '@/api/user/index'
 
let useUserStore = defineStore('User', {
  state: () => {
    return {
      token: '',
    }
  },
  actions: {
    async userLogin(data: loginForm) {
      let result: loginResponseData = await login(data)
      if (result.code == 200) {
        this.token = result.data
        return 'ok'
      } else {
        return Promise.reject(new Error(result.message))
      }
    },
  },
})

在utils下创建token.ts文件

//本地存储
export const SET_TOKEN = (token: string) => {
  localStorage.setItem('TOKEN', token)
}
 
//取出本地数据
export const GET_TOKEN = () => {
  return localStorage.getItem('TOKEN')
}
 
//删除本地数据
export const REMOVE_TOKEN = () => {
  localStorage.removeItem('TOKEN')
}

在user仓库里调用

import { SET_TOKEN, GET_TOKEN, REMOVE_TOKEN } from '@/utils/token'
 
 
let useUserStore = defineStore('User', {
  state: () => {
    return {
      token: GET_TOKEN(),
    }
  },
  actions: {
    async userLogin(loginForm: loginForm) {
      let result: loginResponseData = await login(loginForm)
      if (result.code == 200) {
        this.token = result.data
        // 本地存储持久化存储一份
        SET_TOKEN(result.data as string)
        return 'ok'
      } else {
        return Promise.reject(new Error(result.message))
      }
    },
  },
})
 
export default useUserStore

4.4页面登录跳转

在views的login中，先调用仓库

import useUserStore from '@/store/modules/user.ts'
import { ElNotification } from 'element-plus'
 
let useStore = useUserStore()
 
const loginBtn = async() => {
  try {
    await useStore.userLogin(loginForm)
  } catch (error) {
    ElNotification({
      type: 'error',
      message: (error as Error).message,
    })
  }
}

如果登录信息无误，再实现页面跳转

import { useRouter } from 'vue-router'
 
let $router = useRouter()
 
try {
    await useStore.userLogin(loginForm)
    $router.push({ path: '/' })
  } catch (error) {
    ElNotification({
      type: 'error',
      message: (error as Error).message,
    })
  }