一、保存token,登录使用
index.js
//保存token
localSet(key, value) {
window.localStorage.setItem(key, JSON.stringify(value))
}
login.vue登录页
<script setup>
//登录
const loginMethod = async (data) => {
const params = {
username: data.name,
password: data.pass
}
const res = await http.login(params)
if (res && res.success) {
getLoginResourceTreeData()
const data = res.data
const { id, name, sessionId } = data
utils.localSet('token', sessionId)
utils.localSet('userid', id)
utils.localSet('username', name)
store
.dispatch('user/setUserInfo', data)
.then(() => {})
.catch((res) => {
loading.close()
})
} else {
utils.message('error', res.info, 3000)
loading.close()
}
}
//获取用户属实对应菜单
const getLoginResourceTreeData = async () => {
const params = { resourceCode: '0' }
const res = await http.getLoginResourceTree(params)
if (res && res.success) {
const data = res.data
store
.dispatch('user/getSystemMenus', data)
.then(() => {
router.push('/home')
loading.close()
})
.catch((res) => {
loading.close()
})
} else {
utils.message('error', res.info, 2000)
loading.close()
}
}
//登录确认
const submitForm = (formEl) => {
loading = ElLoading.service({
lock: true,
text: '登录中......',
background: 'rgba(17,28,189,0.25)'
})
if (!formEl) return
formEl.validate((valid) => {
if (valid) {
loginMethod(ruleForm)
} else {
console.log('error submit!')
return false
}
})
}
</script>
<template>
<div>
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="login-form">
<el-form-item class="item" prop="name">
<template #label>
<el-icon class="label-icon"><User /></el-icon>
</template>
<el-input class="inp" v-model="ruleForm.name" placeholder="请输入账号"></el-input>
</el-form-item>
<el-form-item class="item" prop="pass">
<template #label>
<el-icon class="label-icon"><PassWord /></el-icon>
</template>
<el-input
class="inp"
v-model="ruleForm.pass"
type="password"
@keyup.enter="submitForm(ruleFormRef)"
:show-password="true"
placeholder="请输入密码"
></el-input>
</el-form-item>
<el-form-item class="item center">
<el-button class="login-bt" @click="submitForm(ruleFormRef)">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
二、
在这里插入代码片