vue3+element-plus+登录逻辑token环境搭建

需求说明

项目初始化

1 import ElementPlus from 'element-plus'
2 import 'element-plus/dist/index.css'
3 const app = createApp(App) 
4 app.use(ElementPlus)

 

• 安装脚手架工具

1 npm i @vue/cli@4.5.13 -g

• 验证是否安装成功

1 vue -V # 输出 @vue/cli 4.5.13

• 脚手架初始化目录结构

1 vue create jd-shop-manager

• 手动配置需要的功能

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

•  进入到项目目录

1 cd jd-shop-manager

• 附加其他依赖

1 npm i axios element-plus pinia -S

• 运行项目

1 npm run serve

浏览器输入localhost:8080查看效果

 

 

 

配置第三方库

Element-plus

1 import ElementPlus from 'element-plus' 
2 import 'element-plus/dist/index.css' 
3 const app = createApp(App) 
4 app.use(ElementPlus)

Axios

1 Axios.defaults.baseURL = '/api'; 

2 app.config.globalProperties.$ajax = Axios;

vue.config.js配置代理

实现一个基于ElementPlus的基础登录框

<template> <el-form label-width="80px" ref="formRef" :model="form" :rules="rules"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button @click="submit(formRef)">提交</el-button> <el-button @click="reset(formRef)">重置</el-button> </el-form-item> </el-form> </template>

 

<script setup> import { reactive, ref } from "vue"; const form = reactive({ username: "admin", password: "123456", }); const rules = reactive({ username: [{ required: true, message: "必须输入用户名" }], password: [ { required: true, message: "必须输入密码" }, { min:3,max:10 , message:'长度必须在3-10位数'} ], }); const formRef = ref(); const submit = function (formEl) { formEl.validate((valid) => { if (valid) { console.log("验证成功"); } else { console.log("验证失败"); // 阻止表单默认跳转行为 return false; } }); };const reset = function (formEl) { formEl.resetFields(); };</script>

 样式篇

• 初始化样式

html,body { height: 100%; width: 100%;}a { text-decoration: none; }ul {padding:0; }li {list-style: none; }html,body,h1,h2,h3,h4,h5,h6 { padding:0; margin:0; }span {display:inline-block; }

View Code

登录逻辑 

关于token认证

1. 获取token 
2. 保存token
3. 后续携带token

Axios.interceptors.request.use(config => { const token = window.sessionStorage.getItem('token'); if (token) { config.headers.token = token; }return config; }); Axios.interceptors.response.use(response=>{ const {token,code} = response.data; if (token) { window.sessionStorage.setItem('token',token); } }return response; });

View Code

 

标签：Axios,const,element,token,vue,plus
来源： https://www.cnblogs.com/Jishuyang/p/16700801.html