1.登录页面
1:表单验证
2:数据请求
3:token存储
4:路由防卫
1:表单验证
表单部分
<el-form class="w-[250px]" :rules="rules" ref="formRef" :model="fromObj">
<el-form-item prop="username"><el-input placeholder="请输入账号" v-model="fromObj.username">
<template #prefix>
<el-icon>
<User />
</el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item prop="password"><el-input type="password" placeholder="请输入密码"
v-model="fromObj.password" show-password>
<template #prefix>
<el-icon>
<Lock />
</el-icon>
</template></el-input>
</el-form-item>
<el-form-item>
<el-button @click="onSubmit"
class="w-[250px] rounded-3xl bg-blue-600 text-gray-100">登录</el-button>
</el-form-item>
</el-form>
js部分:给表单添加验证规则
1:required属性必须为true,否则不会渲染
2:message为不符合校验规则提示信息
3:trigger: "blur",为表单失去焦点开始校验
// 验证规则
const rules = {
username: [
{
required: true,
message: "用户名不能为空",
trigger: "blur",
},
],
password: [
{
required: true,
message: "密码不能为空",
trigger: "blur",
},
],
};
2:数据请求
1:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js (http://www.axios-js.com/zh-cn/ )
2:配置axios
// 1.导入axios依赖包
import axios from "axios";
// 2.创建axios实例对象
const instance = axios.create({
baseURL: 'api请求接口地址',
timeout: 1000,
});
// 暴露对象
export default instance
3:登录接口请求
// 2.登录接口
export function login(username, password) {
//返回的是promise对象
return axios.post("登录接口url", {
username,
password
})
}
4:在login.vue调用login方法
login(form.username, form.password).then((res) => {
console.log(res);//成功返回
}).catch((err) => {
console.log(err);//失败
});
3: token存储
1:token存储是利用vueuse库,VueUse 是一个基于 Composition API 的实用函数集合。通俗的来说,这就是一个工具函数包支持了更好的逻辑分离,它可以帮助你快速实现一些常见的功能,免得你自己去写,解决重复的工作内容。以及进行了 Composition API 的封装。
2:
//引用vueuse
import { useCookies } from "@vueuse/integrations/useCookies";
login(form.username, form.password)
.then((res) => {
// 2.存储token值
const cookies = useCookies();
cookies.set("admin-token", res.data.data.token);
//admin-token 为存储token的名称
//res.data.data.token为请求的token
})
.catch((err) => {
});
4:路由防卫
1:路由防卫主要是为了防止用户重复登录,和验证用户是否登录。
2:通过判断是否有token值
router.beforeEach(async (to, from, next) => {
document.title = to.meta.title ;
const token = cookie.get("admin-token");
if (!token && to.path !== '/login') {//判断是否有token值和地址是否为登录页
notice('请先登录', 'error')
return next({
path: "/login" //跳到登录页面
})
// 防止重复登录
if (token && to.path == '/login') {
return next({
path: from.path //回到原来页面
})
}
//
if (token) {
await store.dispatch('setUserInfo')
}
next()
}