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 相关文章推荐
Prototype Hash对象 学习
Jul 19 Javascript
javascript 打开页面window.location和window.open的区别
Mar 17 Javascript
Javascript验证用户输入URL地址是否为空及格式是否正确
Oct 09 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
javascript使用闭包模拟对象的私有属性和方法
Oct 05 Javascript
深入对Vue.js $watch方法的理解
Mar 20 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
JS如何获取地址栏的参数实例讲解
Oct 06 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
零基础之Node.js搭建API服务器的详解
Mar 08 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
简单概括PHP的字符串中单引号与双引号的区别
2016/05/07 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
javascript object array方法使用详解
2012/12/03 Javascript
js获得地址栏?问号后参数的方法
2013/08/08 Javascript
js的onload事件及初始化按钮事件示例代码
2013/09/25 Javascript
javascript从image转换为base64位编码的String
2014/07/29 Javascript
javascript常用功能汇总
2015/07/05 Javascript
IE浏览器下PNG相关功能
2015/07/05 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
2015/10/23 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
nodejs使用http模块发送get与post请求的方法示例
2018/01/08 NodeJs
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
linux 后台运行node服务指令方法
2018/05/23 Javascript
5分钟快速看懂ES6中的反射与代理
2019/12/19 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
VUE-ElementUI 自定义Loading图操作
2020/11/11 Javascript
vue的webcamjs集成方式
2020/11/16 Javascript
用Python中的wxPython实现最基本的浏览器功能
2015/04/14 Python
python去除空格和换行符的实现方法(推荐)
2017/01/04 Python
Python 处理数据的实例详解
2017/08/10 Python
解决python删除文件的权限错误问题
2018/04/24 Python
Python可以实现栈的结构吗
2020/05/27 Python
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
美国名牌香水折扣网站:Hottperfume
2021/02/10 全球购物
《望洞庭》教学反思
2014/02/16 职场文书
院领导写的就业推荐信
2014/03/09 职场文书
工程承诺书怎么写
2014/05/24 职场文书
党的群众路线教育实践活动个人整改方案
2014/10/25 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
支行行长竞聘报告
2014/11/06 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书