【vue2.7.16系列】手把手教你搭建后台系统__登录使用状态管理(15)

使用store进行登录信息管理

其实就是把登录放到vuexactions中去执行,然后保存用户信息、权限等
store/modules/account.js中添加如下代码:

import { login, logout, getInfo, menusApi } from '@/api/account';
// getExpiresTime
import {getToken,setToken,removeToken,setUserId,getUserId,removeUserId,setExpiresTime,removeExpiresTime,calcExpiresTime,setPrimissionBtn,getPrimissionBtn,removePrimissionBtn
} from '@/utils/auth';
import { resetRouter } from '@/router';function getMenusList() {const storage = window.localStorage;let menuList = JSON.parse(storage.getItem('menuList'));if (typeof menuList !== 'object' || menuList === null) {menuList = [];}return menuList;
}function setMenusList(menus) {localStorage.setItem('menuList', JSON.stringify(menus));
}const getDefaultState = () => {return {uuid: getUserId(),token: getToken(),name: '',avatar: '',unique_auth: getPrimissionBtn(),menus: getMenusList()};
};const state = getDefaultState();const mutations = {RESET_STATE: (state) => {Object.assign(state, getDefaultState());},SET_UUID: (state, uuid) => {state.uuid = uuid;},SET_TOKEN: (state, token) => {state.token = token;},SET_NAME: (state, name) => {state.name = name;},SET_AVATAR: (state, avatar) => {state.avatar = avatar;},SET_LOGO: (state, logo) => {state.logo = logo;},SET_VERSION: (state, version) => {state.version = version;},SET_UNIQUE_AUTH: (state, unique_auth) => {state.unique_auth = unique_auth;},SET_MENUS: (state, menus) => {state.menus = menus;}
};const actions = {// account loginlogin({ commit }, userInfo) {const { username, password } = userInfo;return new Promise((resolve, reject) => {login({ username: username.trim(), password: password }).then(response => {const { data } = response;const expires = calcExpiresTime(data.expires_time);setToken(data.token, expires);setUserId(data.user_info.id, expires);setExpiresTime(data.expires_time, expires);// 记录用户信息commit('SET_TOKEN', data.token);commit('SET_UUID', data.user_info.id);commit('SET_NAME', data.user_info.account);commit('SET_AVATAR', data.user_info.head_pic);commit('SET_LOGO', data.logo);commit('SET_VERSION', data.version);// 保存菜单及权限信息const btns = data.unique_auth.join(',');commit('SET_UNIQUE_AUTH', btns);commit('SET_MENUS', data.menus);// 存储到本地setMenusList(data.menus);setPrimissionBtn(btns);resolve();}).catch(error => {reject(error);});});},// get account infogetInfo({ commit, state }) {return new Promise((resolve, reject) => {getInfo({ uid: state.uuid }).then(response => {const { data } = response;if (!data) { // token 失效return reject('验证失败, 请重新登录!');}const { id, account } = data;// 更新到state上commit('SET_UUID', id);commit('SET_NAME', account);resolve(data);}).catch(error => {reject(error);});});},// account logoutlogout({ commit, state }) {return new Promise((resolve, reject) => {logout(state.token).then(() => {removeToken(); // must remove  token  firstremoveUserId();removeExpiresTime();removePrimissionBtn();resetRouter();commit('RESET_STATE');resolve();}).catch(error => {reject(error);});});},// remove tokenresetToken({ commit }) {return new Promise(resolve => {removeToken(); // must remove  token  firstremoveUserId();removeExpiresTime();commit('RESET_STATE');resolve();});},getMenus({ commit }) {return new Promise((resolve, reject) => {menusApi().then(async res => {resolve(res);commit('SET_MENUS', res.data.menus);// 存储到本地setMenusList(res.data.menus);}).catch(res => {reject(res);});});}
};export default {namespaced: true,state,mutations,actions
};

utils/auth.js中添加如下代码:

import Cookies from 'js-cookie';const TokenKey = 'token';
const userIdKey = 'uuid';
const BTNS = 'PERMISSIONBTNS';
const expiresTimeKey = 'expires_time';export function setToken(token, cookieExpires) {return Cookies.set(TokenKey, token, { expires: cookieExpires || 1 });
}
export function getToken() {return Cookies.get(TokenKey);
}
export function removeToken() {return Cookies.remove(TokenKey);
}export function setUserId(uuid, cookieExpires) {return Cookies.set(userIdKey, uuid, { expires: cookieExpires || 1 });
}
export function getUserId() {return Cookies.get(userIdKey);
}
export function removeUserId() {return Cookies.remove(userIdKey);
}export function setExpiresTime(expiresTime, cookieExpires) {return Cookies.set(expiresTimeKey, expiresTime, { expires: cookieExpires || 1 });
}
export function getExpiresTime() {return Cookies.get(expiresTimeKey);
}
export function removeExpiresTime() {return Cookies.remove(expiresTimeKey);
}export function calcExpiresTime(expiresTime) {const nowTimeNum = Math.round(new Date() / 1000);const expiresTimeNum = expiresTime - nowTimeNum;return parseFloat(parseFloat(parseFloat(expiresTimeNum / 60) / 60) / 24);
}// 按钮权限
export function setPrimissionBtn(list) {localStorage.setItem(BTNS, list);
}export function getPrimissionBtn() {return localStorage.getItem(BTNS);
}export function removePrimissionBtn() {localStorage.removeItem(BTNS);
}

store/index.js中引入

import account from './modules/account'
const store = new Vuex.Store({modules: {account},......
})

login/index.vue中调用account.jsactions中的login

调整handleLogin方法:

handleLogin() {this.$refs.loginForm.validate((valid) => {if (valid) {this.loading = true;this.$store.dispatch('account/login', this.loginForm).then(() => {this.$router.push({ path: this.redirect || '/admin' });this.loading = false;}).catch((err) => {this.loading = false;this.$message.error(err.msg);});} else {return false;}});
}

当然可能点击登录按钮,无法完成跳转,因为接口未返回以下数据,导致报错。

请添加图片描述

至此完成。。。未有详尽之处,后续迭代

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/466085.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sql报错信息将字符串转换为 uniqueidentifier 时失败

报错信息: [42000] [Microsoft][SQL Server Native Client 10.0][SQL Server]将字符串转换为 uniqueidentifier 时失败 出错行如下: 表A.SourceCode 表B.ID 出错原因: SourceCode是nvarchar,但ID是uniqueidentifier 数据库查询字段和类…

「Mac畅玩鸿蒙与硬件22」鸿蒙UI组件篇12 - Canvas 组件的动态进阶应用

在鸿蒙应用中,Canvas 组件可以实现丰富的动态效果,适合用于动画和实时更新的场景。本篇将介绍如何在 Canvas 中实现动画循环、动态进度条、旋转和缩放动画,以及性能优化策略。 关键词 Canvas 组件动态绘制动画效果动态进度条旋转和缩放性能优…

Python练习10

Python日常练习 题目: 编写程序,输出如下所示图案。 * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 要求: 使用for循环的方式完成 --------------------------------------------------------- 注意: …

【前端】html的8个常用标签

HTML html 超文本链接(标记)语言 H5 HTML v5 get/post/delete/put —— restful 网络规划 Web开发 结构样式动作 架构 装饰 交互(动作) 装饰做好了–> UI工程师 标签 文本相关 图片、图像、声音 导航 表格* 列表 表单标签* 布局标签 H5…

Java高效学习家教平台系统小程序源码

📚 家教平台系统:让孩子学习更高效的秘密武器 🚀 👩‍🏫 引言:家教新风尚,线上平台引领教育潮流 在这个信息爆炸的时代,家教平台系统如同雨后春笋般涌现,为孩子们的学习…

Qt多边形填充/不填充绘制

1 填充多边形绘制形式 void GraphicsPolygonItem::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget) {Q_UNUSED(option);Q_UNUSED(widget);//painter->setPen(pen()); // 设置默认画笔//painter->setBrush(brush()); // 设置默…

OpenAI大事记;GPT到ChatGPT参数量进化

目录 OpenAI大事记 GPT到ChatGPT参数量进化 OpenAI大事记 GPT到ChatGPT参数量进化 ChatGPT是从初代 GPT逐渐演变而来的。在进化的过程中,GPT系列模型的参数数量呈指数级增长,从初代GPT的1.17亿个参数,到GPT-2的15 亿个参数,再到 GPT-3的1750 亿个参数。模型越来越大,训练…

一文了解Java序列化

Java 序列化(Serialization)是将对象的状态转换为字节流,以便将对象的状态保存到文件中或通过网络传输的过程。反序列化(Deserialization)则是将字节流恢复为原始对象。Java 序列化主要通过 Serializable 接口实现。 为…

vue解决跨域问题

1、在vue项目的根目录创建vue.config.js的文件 复制以下带代码 devServer: {proxy: {/api: {target: http://localhost:3000, // 目标服务器地址changeOrigin: true, // 是否改变源pathRewrite: {^/api: // 重写路径,例如将/api/user重写为/user}}}}2、将接口的地…

是时候用开源降低AI落地门槛了

过去三十多年,从Linux到KVM,从OpenStack到Kubernetes,IT领域众多关键技术都来自开源。开源技术不仅大幅降低了IT成本,也降低了企业技术创新的门槛。 那么,在生成式AI时代,开源能够为AI带来什么?…

基于SSM+VUE守护萌宠宠物网站JAVA|VUE|Springboot计算机毕业设计源代码+数据库+LW文档+开题报告+答辩稿+部署教+代码讲解

源代码数据库LW文档(1万字以上)开题报告答辩稿 部署教程代码讲解代码时间修改教程 一、开发工具、运行环境、开发技术 开发工具 1、操作系统:Window操作系统 2、开发工具:IntelliJ IDEA或者Eclipse 3、数据库存储&#xff1a…

Oh My Posh安装

nullSet up your terminalhttps://ohmyposh.dev/docs/installation/windows Git ee oh-my-posh: Windows上的oh-my-zsh,源地址 https://github.com/JanDeDobbeleer/oh-my-posh.git (gitee.com)https://gitee.com/efluent/oh-my-posh

基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)

🎈系统亮点:协同过滤算法、节流算法、支付宝沙盒支付、图形化分析、实时聊天; 一.系统开发工具与环境搭建 1.系统设计开发工具 后端使用Java编程语言的Spring boot框架 项目架构:B/S架构 运行环境:win10/win11、jdk1…

Webserver(4.8)UDP、广播、组播

目录 UDP通信server.cclient.c 广播client.cserver.c 组播client.cserver.c UDP通信 server.c #include<arpa/inet.h> #include<stdio.h> #include<stdlib.h> #include<unistd.h> #include<string.h> int main(){//1.创建一个通信的socketint f…

大数据集群中实用的三个脚本文件解析与应用

目录 一、jps - cluster.sh 脚本文件 &#xff08;一&#xff09;背景与功能 &#xff08;二&#xff09;使用方法 二、集群文件分发脚本 xsync.sh &#xff08;一&#xff09;背景与问题 &#xff08;二&#xff09;功能与实现原理 &#xff08;三&#xff09;脚本编写…

普通人没钱又没能力的话,那就踏实学一门手艺

其实想在这个社会上谋生有很多种方式&#xff0c;大致可以分为这么几个类型。 ​ 1&#xff1a;劳动型 大多数人无疑都是从事的劳动型工作&#xff0c;靠出卖体力挣钱&#xff0c;如建筑工人、快递员、服务员&#xff0c;车间杂工等等。这种性质的工作比较累&#xff0c;性价…

数据管理的四大支柱:揭秘数据中台、数据仓库、数据治理和主数据

文章目录 一、数据中台&#xff1a;数据的“中央厨房”二、数据仓库&#xff1a;数据的“图书馆”三、数据治理&#xff1a;数据的“交警”四、主数据&#xff1a;数据的“身份证”五、定位与差异&#xff1a;协同作战的团队成员 在数字化时代&#xff0c;企业数据管理变得至关…

RabbitMQ 的集群

大家好&#xff0c;我是锋哥。今天分享关于【RabbitMQ 的集群】面试题&#xff1f;希望对大家有帮助&#xff1b; RabbitMQ 的集群 RabbitMQ 是一种流行的开源消息代理&#xff0c;广泛用于构建分布式系统中的消息队列。随着应用程序规模的扩大&#xff0c;单一的 RabbitMQ 实…

PostgreSQL核心揭秘(三)-元组结构

目录 概述 2. 堆元组介绍 1&#xff09;HeapTupleHeaderData 结构 2&#xff09;空值位图&#xff08;Null Bitmap&#xff09; 3&#xff09;用户数据&#xff08;User Data&#xff09; 3. 元组增、删、改操作介绍 1&#xff09;增&#xff08;INSER…

在数据抓取的时候,短效IP比长效IP有哪些优势?

在数据抓取领域&#xff0c;代理IP的选择对于任务的成功率和效率至关重要。短效IP和长效IP各有其特点和适用场景&#xff0c;但在数据抓取过程中&#xff0c;短效IP因其独特的优势而受到青睐。本文将和大家一起探讨短效IP在数据抓取中相比长效IP的优势。 短效IP的定义与特点 …