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 相关文章推荐
JavaScript中实现map功能代码分享
Jun 11 Javascript
JS中setTimeout的巧妙用法前端函数节流
Mar 24 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
Sep 17 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
详解vue-cli构建项目反向代理配置
Sep 07 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
koa2 用户注册、登录校验与加盐加密的实现方法
Jul 22 Javascript
layui table 多行删除(id获取)的方法
Sep 12 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
如何实现iframe父子传参通信
Feb 05 Javascript
three.js 制作动态二维码的示例代码
Jul 31 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
便携利器 — TECSUN PL-365简评
2021/03/02 无线电
冰滴咖啡制作步骤
2021/03/03 冲泡冲煮
php Rename 更改文件、文件夹名称
2011/05/24 PHP
CentOS安装php v8js教程
2015/02/26 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PHP中你应该知道的require()文件包含的正确用法
2015/06/12 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
php文件缓存方法总结
2016/03/16 PHP
thinkphp框架下404页面设置 仅三步
2016/05/14 PHP
Code: write(s,d) 输出连续字符串
2007/08/19 Javascript
使用jQuery简化Ajax开发 Ajax开发入门
2009/10/14 Javascript
js获取对象为null的解决方法
2013/11/21 Javascript
理解 JavaScript Scoping & Hoisting(二)
2015/11/18 Javascript
原生JavaScript制作计算器
2016/10/16 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
微信小程序 自定义Toast实例代码
2017/06/12 Javascript
详解vue.js的事件处理器v-on:click
2017/06/27 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
JavaScript面向对象的程序设计(犯迷糊的小羊)
2018/05/27 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
微信小程序下拉框功能的实例代码
2018/11/06 Javascript
python实现将汉字转换成汉语拼音的库
2015/05/05 Python
python利用socketserver实现并发套接字功能
2018/01/26 Python
python中int与str互转方法
2018/07/02 Python
Django实现列表页商品数据返回教程
2020/04/03 Python
使用HTML5 Canvas API中的clip()方法裁剪区域图像
2016/03/25 HTML / CSS
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
J2EE的优越性主要表现在哪些方面
2016/03/28 面试题
马云的职业生涯规划之路
2014/01/01 职场文书
继续教育个人总结
2015/03/03 职场文书
工作简历自我评价
2015/03/11 职场文书
如何写好闭幕词
2019/04/02 职场文书
【HBU】数据库第四周 单表查询
2021/04/05 SQL Server
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android