登录过程(vuex存储token、token持久化)

news2024/11/23 22:17:10

登录过程(vuex存储数据)

在这里插入图片描述

  • 点击登录按钮通过表单校验
this.$refs.loginForm.validate(valid => {
        if (valid) {
          //按钮动画加载,禁用 
          this.loading = true
          // 调用vuex的action发送登录请求
          this.$store
            .dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/' })
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
  • vuex中:store/modules/user.js 注意要在store/index.js中导入模块并在modules中添加user
import { userLogin } from '@/api/user'
import { getToken, setToken } from '@/utils/auth'
export default {
  namespaced: true,
  state: {
     //取token
    token: getToken() || ''
  },
  mutations: {
    doLogin(state, newToken) {
      //更新token 
      state.token = newToken
      //存token
      setToken(newToken)
    }
  },
  actions: {
    async login(context, payload) {
      //发送请求获取token
      const { data } = await userLogin(payload)
      console.log(data.data)
      context.commit('doLogin', data.data)
    }
  }
}
  • 引入的文件
    • 1.登录接口 (此处不写) : @/api/user
    • 2.在cookies中存取token接口 : @/utils/auth
import Cookies from 'js-cookie' //封装的cookies ,也可用本地存储localStorage,此处用cookie存储
const TokenKey = 'vue_admin_template_token'

export function getToken() {
  return Cookies.get(TokenKey)
}

export function setToken(token) {
  Cookies.set(TokenKey, token)
}

export function removeToken() {
  Cookies.remove(TokenKey)
}

2.1 存token详细步骤:

第一步:使用 dispatch 调用vuex中的action
		this.$store.dispatch('user/login', this.loginForm)
		//执行成功后的操作
            .then(() => {
            //跳转到首页
              this.$router.push({ path: this.redirect || '/' })
            //关闭按钮动画
              this.loading = false
            })
		//执行失败后的操作
            .catch(() => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
第二步:在vuex中的action发送ajax请求获取token,commit到mutation中修改state数据
 actions: {
    async login(context, payload) {
      //发送请求获取token
      const { data } = await userLogin(payload)
      context.commit('doLogin', data.data)
    }
第三步:在mutations中修改state中存储的token数据(token持久化)
 mutations: {
    doLogin(state, newToken) {
      //更新token 
      state.token = newToken
      //存token,做持久化
      setToken(newToken)
    }
  },
第四步:在state中获取token保证最新
state: {
     //取token
    token: getToken() || ''
  },

2.2 给请求头统一添加token

  • 在请求拦截器中,统一添加
service.interceptors.request.use(config => {
  // 如果有token,统一添加token
  if (store.state.user.token) {
    config.headers.Authorization = `Bearer ${store.state.user.token}`
  }
  return config
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

内存分配函数(动态内存分配)详解

目录 🎑为什么要进行动态内存开辟? 🎑malloc和free 🎠malloc函数 🎠free函数 🎠malloc函数和free函数的实际应用 🎑calloc函数 🎑realloc函数 🎠realloc函数的使用示例 &…

通过脚手架vue-cli创建一个vue项目

我需要在vue-demo文件下新建vue项目 步骤一 ①在该文件夹下打开集成终端 输入创建命令 命令 vue create 项目名称 ,注意不要使用驼峰命名法 如果是第一次配置,有面的提示,这里说你这样速度会很慢的,用不用镜像啊,这…

样品制备丨艾美捷硝酸盐/亚硝酸盐荧光法检测试剂盒

一氧化氮(NO)是由一氧化氮合酶(NOS)在生物系统中合成的。NOS是一种非常复杂的酶,作用于分子氧、精氨酸和NADPH,产生NO、瓜氨酸和NADP。这个过程需要五个额外的辅因子(FMN、FAD、血红素、钙调素和…

制造业ERP管理系统在企业采购管理中的作用是什么?

对于任何一家企业,采购都是头等大事。企业的采购工作往往是决定了企业产品的交货速度、成本和质量,特别是在制造行业,采购成本甚至占比产品成本的60%以上,降低采购成本是提高企业竞争力的关键。因此,对于企业采购领域的…

Effective C++条款34:区分接口继承和实现继承

Effective C条款34:区分接口继承和实现继承(Differentiate between inheritance of interface and inheritance of implementation)条款34:区分接口继承和实现继承1、纯虚函数2、虚函数(非纯)2.1 将默认实现…

2022 IoTDB Summit:中国核电刘旭嘉《工业时序数据库 Apache IoTDB 在核电的应用实践》...

12 月 3 日、4日,2022 Apache IoTDB 物联网生态大会在线上圆满落幕。大会上发布 Apache IoTDB 的分布式 1.0 版本,并分享 Apache IoTDB 实现的数据管理技术与物联网场景实践案例,深入探讨了 Apache IoTDB 与物联网企业如何共建活跃生态&#…

middlebury立体匹配评估使用方法总结(三)——线上版教程

系列文章目录 middlebury立体匹配评估使用方法总结(一)——网站说明 middlebury立体匹配评估使用方法总结(二)——python版离线教程 middlebury立体匹配评估使用方法总结(三)——线上版教程 文章目录系列文…

TableLayout布局

表格布局-TableLayout 1.TableLayout简介 1.简介 表格的形式,整齐可以嵌套继承于线性布局2.行数如何确定? tableRow,来指定行数列数由最多的那个决定layout_column来指定具体的列数,从0开始2.TableLayout的常见属性 所有的都是从0…

VMware ESxi 服务器迁移【手动版】

VMware ESxi 迁移【手动版】 应用场景 两个不同环境下的服务器进行迁移 因为不能直接对拷,需要在中间机上转一下 才有了这么一出 第一步 搭建NFS 在中间机上安装NFS(或者其他磁盘挂载方式) 目的呢是把源服务器上的系统拷贝到中间机上&#x…

android入门之broadcast

1. 前言 广播Broadcast是android四大组件之一。是用来互相通信(传递信息)的一种机制。 通信包括: a) 组件间(应用内)通信 b) 进程间通信 2. 广播Brocast的基本使用方式 广播发送者:Acvitity、Service等…

pdf文档页码怎么添加?分享这几个pdf加页码方法给你

不管是还在校园里的学生,还是已经步入职场的小伙伴,都会遇到要对一些文档进行编辑处理,例如有时需要将word、excel、ppt等格式的文档与pdf文件进行相互转换,有时又需要对pdf文件进行编辑文档增加页眉页脚、拆分合并、加密解密等操…

基于Python+Echarts+Pandas 搭建一套图书分析大屏展示系统(附源码)

今天给大家分享的是基于 Flask、Echarts、Pandas 等实现的图书分析大屏展示系统。 项目亮点 采用 pandas、numpy 进行数据分析 基于 snownlp、jieba 进行情感分析 后端接口选用 RESTful 风格,构建 Swagger 文档 基于 Flask、Echarts 构建 Web 服务,采…

2022年债券估值工具和方法

第一章 债券估值原理概述 债券估值是决定债券公平价格[1]的过程。债券公平价格是债券的预期现金流经过合适的折现率折现以后的现值,其原理是未来现金流流出折现到今日与今日现金流流出相等。因此,债券的估值模型可以表示为: 资料来源&#x…

新冠阳性的第四篇博客,SpringBoot 任务(异步、定时、邮件)

新冠阳性的第四篇博客,SpringBoot 任务(异步、定时、邮件)1.异步任务2.邮件任务3.定时任务1.异步任务 异步处理还是非常常用的,比如我们在网站上发送邮件,后台会去发送邮件,此时前台会造成响应不动&#x…

Python多元线性回归、机器学习、深度学习在近红外光谱分析中的应用

导师:郁磊副教授,主要从事MATLAB 编程、机器学习与数据挖掘、数据可视化和软件开发、人工智能近红外光谱分析、生物医学系统建模与仿真,具有丰富的实战应用经验,主编《MATLAB智能算法30个案例分析》、《MATLAB神经网络43个案例分析…

【Vue】二、 认识Vue.js的各种指令

后端程序员的vue学习之路1、创建第一个vue对象2、vue构造器3、Vue.js模板语法v-text至v-for练习v-on指令练习v-bind指令练习v-model指定练习v-pre指令v-slot指令v-cloak指令v-once指令1、创建第一个vue对象 引入了vue.js后,在页面就可以创建一个Vue对象&#xff0c…

JS圣诞树

✅作者简介:热爱国学的Java后端开发者,修心和技术同步精进。🍎个人主页:Java Fans的博客🍊个人信条:不迁怒,不贰过。小知识,大智慧。💞当前专栏:前端案例分享…

this指向问题,apply,call,bind用法及区别

1.谁调用我,我就指向谁。 在页面上直接打印一个consle.log(this),这个this会指向window对象。如果写一个函数:打印this,该this会指向window。因为这个函数是挂载在这个window对象上的。对象obj的this指向的是对象,因为…

[ 漏洞挖掘基础篇五 ] 漏洞挖掘之 XSS 注入挖掘

🍬 博主介绍 👨‍🎓 博主介绍:大家好,我是 _PowerShell ,很高兴认识大家~ ✨主攻领域:【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 🎉点赞➕评论➕收藏 养成习…

创新指南|2023年企业战略制定应避免的5大误区

在迅速发展、不断变化的当下,尤其是疫情黑天鹅发生之后,许多企业面临着高度的不确定性,从而亟需进行企业战略的思考。在本文中,战略专家Stephen Bungay指出了五个战略误区,并解释了它们为什么听起来正确,以…