Vue 401配合Vuex防止多次弹框的案例


Posted in Javascript onNovember 11, 2020

1.安装Vuex

npm install vuex --save

2. 新建store目录结构

Vue 401配合Vuex防止多次弹框的案例

3. 编辑store.js

import Vuex from 'vuex'
import Vue from 'vue'
import defaultState from './state/state'
import mutations from './mutations/mutations'
import getters from './getters/getters'
import actions from './actions/actions'
 
Vue.use(Vuex)
 
// 开发环境
const isDev = process.env.NODE_ENV === 'development'
 
export default new Vuex.Store({
 strict: isDev, // 开发环境中使用严格模式,防止给Vuex的状态对象直接赋值
 state: defaultState,
 mutations,
 getters,
 actions
})

4. 编辑state.js

export default {
 tokenStatus: true, // token状态
}

5. 编辑mutations.js

export default {
 updateTokenStatus (state, bool) {
  state.tokenStatus = bool
 }
}

PS: getters用于计算属性,actions用于异步操作(暂无使用)

6. 挂载到vue根目录下,编辑main.js

import store from './store/store'
 
new Vue({
 store,
 router,
 render: h => h(App)
}).$mount('#app')

7. login 登录时,改变state.tokenStatus的值

import { mapMutations } from 'vuex' 
methods: {
  // 声明Vuex的mutations的方法
  ...mapMutations(['updateTokenStatus']),
  // 登录方法
  login () {
    ......
    // 改变Vuex.state.tokenStatus的值
    this.updateTokenStatus(true)
  }
}

8. 配置axios的错误判断

// 初始化用户信息
  initUserInfo () {
   const p1 = this.$api.user.getUserInfo()
   p1.then(result => {
    this.data = result
    this.isEdit = false
    this.firstLoading = false
   }).catch(reason => {
    this.firstLoading = false
    this.isEdit = false
    // 目前后端是通过code为-1,返回错误信息
    if (parseInt(reason.code) === -1) {
     this.$alert(reason.message, '提示', { type: 'error' })
    }
   })
  },

9. 拦截响应, 处理401,返回自定义错误

import router from '../../router'
import axios from 'axios'
import localStorage from 'localStorage'
import { MessageBox } from 'element-ui'
import store from '../../store/store'
 
// http response 拦截器
axios.interceptors.response.use(
 response => {
  return response
 },
 error => {
  if (error.response) {
   if (error.response.status === 401) {
    switch (error.response.status) {
     case 401:
      const route = localStorage.getItem('vip_entrance')
      router.replace({
       path: route,
       query: { redirect: router.currentRoute.fullPath }
      })
      if (store.state.tokenStatus) {
       // 饿了么框架弹框
       MessageBox.alert('登录超时!', '提示', { type: 'error' })
       // 修改tokenStatus状态,防止多次点击
       store.commit('updateTokenStatus', false)
      }
      const data = {
       code: 1
      }
      return Promise.reject(data)
    }
   }
  }
  return Promise.reject(error.response.data)
 }
)

补充知识:vue 配置vuex在严格模式下出现是问题

我就废话不多说了,大家还是直接看代码吧~

需要关闭严格模式,不然会报错

import Vue from "vue";
import Vuex from "vuex";
import createPersistedState from "vuex-persistedstate";
import * as Cookies from "js-cookie";
import user from "./modules/user";
import myCen from "./modules/myCen";
import registered from "./modules/registered";
Vue.use(Vuex);

export default new Vuex.Store({
 strict: false, //关闭严格模式
 modules: {
  user,
  myCen,
  registered
 },
 // 持久化储存
 plugins: [ 
  createPersistedState({
   storage: {
    getItem: key => Cookies.get(key),
    setItem: (key, value) => Cookies.set(key, value, { expires: 7 }),
    removeItem: key => Cookies.remove(key)
   }
  })
 ]
});

以上这篇Vue 401配合Vuex防止多次弹框的案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
Firefox div高度自适应
Apr 28 Javascript
node.js中的fs.exists方法使用说明
Dec 17 Javascript
简介JavaScript中fixed()方法的使用
Jun 08 Javascript
JS+CSS实现精美的二级导航效果代码
Sep 17 Javascript
jQuery实现的跨容器无缝拖动效果代码
Jun 21 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
原生js实现获取form表单数据代码实例
Mar 27 Javascript
Nuxt使用Vuex的方法示例
Sep 06 Javascript
vue+springboot图片上传和显示的示例代码
Feb 14 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
vue实现tab栏点击高亮效果
Aug 19 Javascript
VUE-ElementUI 自定义Loading图操作
Nov 11 #Javascript
在elementui中Notification组件添加点击事件实例
Nov 11 #Javascript
vue.js+element 默认提示中英文操作
Nov 11 #Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 #Javascript
vue 实现element-ui中的加载中状态
Nov 11 #Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 #Javascript
JS前端基于canvas给图片添加水印
Nov 11 #Javascript
You might like
PHP 中执行系统外部命令
2006/10/09 PHP
Email+URL的判断和自动转换函数
2006/10/09 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
详解PHP处理密码的几种方式
2016/11/30 PHP
php根据年月获取当月天数及日期数组的方法
2016/11/30 PHP
php json相关函数用法示例
2017/03/28 PHP
php工具型代码之印章抠图
2018/07/18 PHP
运用jquery实现table单双行不同显示并能单行选中
2009/07/25 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
2013/11/10 Javascript
js 通用订单代码
2013/12/23 Javascript
使用jQuery重置(reset)表单的方法
2014/05/05 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
2014/08/10 Javascript
JavaScript使用push方法添加一个元素到数组末尾用法实例
2015/04/06 Javascript
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
jquery ui dialog替代confirm实例分析
2016/01/25 Javascript
jQuery 如何实现一个滑动按钮开关
2016/12/01 Javascript
es6的数字处理的方法(5个)
2017/03/16 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
JavaScript实现图片轮播特效
2019/10/23 Javascript
Vue实现渲染数据后控制滚动条位置(推荐)
2019/12/09 Javascript
win7 下搭建sublime的python开发环境的配置方法
2014/06/18 Python
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
使用Python来做一个屏幕录制工具的操作代码
2020/01/18 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
世界顶级俱乐部的官方球衣和套装:Subside Sports
2018/04/22 全球购物
爱尔兰橄榄球店:Irish Rugby Store
2019/12/05 全球购物
平安校园建设方案
2014/05/02 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
消防安全月活动总结
2015/05/08 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
2019年大学生学年自我鉴定!
2019/03/25 职场文书
Windows安装Anaconda3的方法及使用过程详解
2021/06/11 Python