開始一個vue項目-day2

這次新增的功能有：

1、使用cookie存儲token

參考網站:https://vueuse.org/

安裝包：

npm i @vueuse/integrations

npm i universal-cookie@^7

2、cookie的設置讀取和刪除，代碼：composables/auth.js

import { useCookies } from '@vueuse/integrations/useCookies'const cookie = useCookies()
const tokenKey = "admin-token"export function setToken(token){return cookie.set(tokenKey, token)
}
// 讀取tokenexport function getToken(){return cookie.get(tokenKey)
}// 刪除token
export function deleteToken(){return cookie.remove(tokenKey)
}

3、存儲token

統一封裝到permission.js

4、添加攔截器，axios中文文檔|axios中文網 | axios，代碼axios.js

import { createStore } from 'vuex'
import { setToken } from '~/composables/auth';
import { getInfo } from '~/api/manager'
import { login } from '~/api/manager'
import { deleteToken } from '../composables/auth';
// // 創建一個新的 store 實例
const store = createStore({state() {return {// 用戶信息user: {}}},mutations: {// 記錄用戶信息SET_USERINFO(state, user) {state.user = user}},actions: {// 登錄login({ commit }, { username, password }) {return new Promise((resolve, reject) => {login(username, password).then(res => {setToken(res.token)resolve(res)}).catch(err => reject(err))})},// 獲取當前登錄用戶信息getInfo({ commit }) {return new Promise((resolve, reject) => {getInfo().then(res => {commit("SET_USERINFO", res)resolve(res)}).catch(err => reject(err))})},// 退出登錄logout({ commit }) {// 移除cookie里面的tokendeleteToken()// 清楚當前用戶狀態vuexcommit("SET_USERINFO", {})}},})export default store

5、抽出統一的方法，在manager.js里：

import axios from "~/axios"export function login(username, password){
return axios.post("/admin/login",{username,password
})
}export function getInfo(){return axios.post("/admin/getinfo")}export function logout(){return axios.post("/admin/logout")}

6、寫一個Util,封裝成功或失敗的提示方法

import { ElNotification } from 'element-plus'
import { fa } from 'element-plus/es/locales.mjs'
import { ElMessage, ElMessageBox } from 'element-plus'// 成功提示
export function toast(message, type = "success", dangerouslyUseHTMLString=false){ElNotification({message,type,dangerouslyUseHTMLString,duration: 3000})
}export function showModel(content = "提示內容", type = "warning",title=""){return ElMessageBox.confirm(content,title,{confirmButtonText: '確認',cancelButtonText: '取消',type: type,})
}

7、Vuex的狀態管理，參考網站：https://vuex.vuejs.org/zh/

可以將我們登錄完之后拿到的用戶信息共享給其它頁面和組件

安裝：npm install vuex@next --save

a、新建：store/index.js

import { createStore } from 'vuex'
import { setToken } from '~/composables/auth';
import { getInfo } from '~/api/manager'
import { login } from '~/api/manager'
import { deleteToken } from '../composables/auth';
// // 創建一個新的 store 實例
const store = createStore({state() {return {// 用戶信息user: {}}},mutations: {// 記錄用戶信息SET_USERINFO(state, user) {state.user = user}},actions: {// 登錄login({ commit }, { username, password }) {return new Promise((resolve, reject) => {login(username, password).then(res => {setToken(res.token)resolve(res)}).catch(err => reject(err))})},// 獲取當前登錄用戶信息getInfo({ commit }) {return new Promise((resolve, reject) => {getInfo().then(res => {commit("SET_USERINFO", res)resolve(res)}).catch(err => reject(err))})},// 退出登錄logout({ commit }) {// 移除cookie里面的tokendeleteToken()// 清楚當前用戶狀態vuexcommit("SET_USERINFO", {})}},})export default store

b、在main.js里面引入

import { createApp } from 'vue'
// import './style.css'
import App from './App.vue'
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import store from './store'
import "./permission"const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)}
app.use(ElementPlus)
app.use(router)
app.use(store)
import 'virtual:windi.css'
app.mount('#app')

8、前置守衛，每次訪問接口都通過這個判斷有沒有權限沒權限就拒絕：

導航守衛 | Vue Router

a、permission.js

import router from "~/router"
import {getToken} from "~/composables/auth"
import {toast} from "~/components/util"
import store from "./store"// 前置守衛
router.beforeEach(async (to, from, next) => {console.log("前置守衛")const token = getToken()console.log(token)console.log(to.path)// 沒有登錄，強制跳轉為登錄頁面if (!token && to.path != "/login"){toast("請先登錄", "error")return next({path:"/login"})}// 防止重復登錄console.log(to.path)if (token && to.path == "/login"){toast("不允許重復登錄", "error")return next({path:from.path ? from.path : "/"})}// 如果用戶登錄了，自動獲取用戶信息存儲到vuexif (token){// 異步操作，添加awaitxawait store.dispatch("getInfo")}next()})

b、需要在main.js里面引入

import "./permission"

9、添加鍵盤事件

a、輸入密碼即可回車登錄，F12,查看打印的信息

b、具體代碼見：login.vue

10、退出登錄

以上所有功能完整的login.vue代碼：

<template><el-row class="login-container"><el-col :lg="16" :md="12" class="left"><div><div class="font-bold text-5xl text-light-50 mb-4">歡迎光臨</div><div class="text-gray-200 text-sm">此站點是學習演示</div></div></el-col><el-col :lg="8" :md="12" class="right"><h2 class="title">歡迎回來</h2><div class=""><span class="line"></span><span>賬號密碼登錄</span><span class="line"></span></div><el-form ref="formRef" :model="form" class="w-[250px]" :rules="rules"><el-form-item prop="username"><el-input v-model="form.username" placeholder="請輸入用戶名"><template #prefix><el-icon><User /></el-icon></template></el-input></el-form-item><el-form-item prop="password"><el-input v-model="form.password" placeholder="請輸入密碼" type="password" show-password><template #prefix><el-icon><Lock /></el-icon></template></el-input></el-form-item><el-form-item><el-button class="w-[250px]" type="primary" round @click="onSubmit" color="#626aef" :loading="loadding">登錄</el-button></el-form-item></el-form></el-col></el-row>
</template><script setup>
import { reactive, ref, onMounted, onBeforeUnmount } from 'vue';
// import { User, Lock} from '@element-plus/icons-vue'
import { login } from '~/api/manager'
import { toast } from '~/components/util';
// import { getInfo } from '~/api/manager'
import { ElNotification } from 'element-plus'import { useRouter } from 'vue-router';
import { Loading } from '@element-plus/icons-vue';
import { fa, tr } from 'element-plus/es/locales.mjs';
import { setToken } from '~/composables/auth';
import { useStore } from 'vuex';
const router = useRouter()
const store = useStore()
const loadding = ref(false)
const form = reactive({username: '',password: ''
})
const rules = {username: [{required: true,message: '請輸入用戶名',trigger: 'blur',},// {//     min: 6,//     max: 6,//     message: '用戶名長度必須是6個字符',//     trigger: 'blur'// }],password: [{required: true,message: '請輸入密碼',trigger: 'blur',}]
}// 對表單輸入的值做校驗
const formRef = ref(null)const onSubmit = () => {formRef.value.validate((valid) => {console.log('valid')if (!valid) {return false}loadding.value = trueconsole.log("開始請求接口")store.dispatch("login", form).then(res=>{toast("登錄成功")router.push("/")}).finally(()=>{loadding.value = false})// login(form.username, form.password).then(res => {//     console.log(res)//     toast("登錄成功")// 提示成功// ElNotification({//     message: "登錄成功",//     type: 'success',//     duration: 3000// })// 存儲用戶相關信息// const cookie = useCookies()// setToken(res.token)// cookie.set("admin-token", res.token)// 獲取用戶相關信息// getInfo().then(res2 =>{//     store.commit('SET_USERINFO', res2)//     console.log(res2)// })// 跳轉后臺首頁//         router.push("/")//     }).finally(()=>{//     loadding.value = false// })})
}// 監聽回車事件
function onKeyUp(e){console.log(e)if (e.key == "Enter") onSubmit()
}// 添加鍵盤監聽
onMounted(()=>{document.addEventListener("keyup", onKeyUp)})// 移除鍵盤監聽
onBeforeUnmount(()=>{document.removeEventListener("keyup", onKeyUp)
})
</script><style scoped>
.login-container {@apply min-h-screen bg-indigo-500
}.login-container .left, .login-container .right {@apply flex items-center justify-center
}.login-container .right {@apply bg-light-50 flex-col
}.login-container .right .title {@apply font-bold text-3xl text-gray-900
}.login-container .right>div {@apply flex items-center justify-center my-5 space-x-2 text-gray-300
}.login-container .right>div .line {@apply h-[1px] w-16 bg-gray-200
}
</style>