token相关

一、保存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>

二、

复制代码
在这里插入代码片
相关推荐
Gkoob几秒前
Vue3+Three.js 打造实时设备状态 3D 可视化面板
开发语言·javascript·3d
freewlt1 分钟前
前端工程化进阶:Monorepo 架构实战指南
前端·架构
m0_716765231 分钟前
C++巩固案例--通讯录管理系统详解
java·开发语言·c++·经验分享·学习·青少年编程·visual studio
三翼鸟数字化技术团队6 分钟前
DepSleuth - 前端依赖分析工具的技术原理与实践
前端
慧一居士6 分钟前
pinia-plugin-persistedstate 在nuxt4项目中服务端渲染,不能使用window对象原因
前端·vue.js
子兮曰9 分钟前
同样做中文平台自动化:为什么你越跑越贵,而 OpenCLI 越跑越稳
前端·github·命令行
jf加菲猫9 分钟前
第10章 数据处理
xml·开发语言·数据库·c++·qt·ui
小陈工10 分钟前
2026年4月1日技术资讯洞察:AI芯片革命、数据库智能化与云原生演进
前端·数据库·人工智能·git·python·云原生·开源
酉鬼女又兒12 分钟前
零基础快速入门前端深入掌握箭头函数、Promise 与 Fetch API —— 蓝桥杯 Web 考点全解析(可用于备赛蓝桥杯Web应用开发)
开发语言·前端·css·职场和发展·蓝桥杯·es6·js
木斯佳12 分钟前
前端八股文面经大全:字节广告交易前端一面(2026-03-31)·面经深度解析
前端·markdown·虚拟列表·流式数据