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中事件触发列表与解说
Jul 09 Javascript
jquery ztree实现下拉树形框使用到了json数据
May 14 Javascript
Jquery动态添加及删除页面节点元素示例代码
Jun 16 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
JavaScript定时器和优化的取消定时器方法
Jul 03 Javascript
利用jQuery和CSS将背景图片拉伸
Oct 16 Javascript
Javascript之Number对象介绍
Jun 07 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
vue自动化表单实例分析
May 06 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 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计算2点经纬度之间的距离代码
2013/08/12 PHP
php解析url的三个示例
2014/01/20 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
深入讲解PHP的对象注入(Object Injection)
2017/03/01 PHP
PHP中SESSION过期设置
2021/03/09 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
2013/05/06 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
判断客户浏览器是否支持cookie的示例代码
2013/12/23 Javascript
javascript实现checkbox全选的代码
2015/04/30 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
JavaScript实现256色转灰度图
2017/02/22 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
JavaScript之promise_动力节点Java学院整理
2017/07/03 Javascript
javaScript封装的各种写法
2017/08/14 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
详解Angular中通过$location获取地址栏的参数
2018/08/02 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
[07:54]DOTA2 MV《我的动力鞋》 ImbaTV 出品
2014/11/21 DOTA
解决Python 爬虫URL中存在中文或特殊符号无法请求的问题
2018/05/11 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
python3爬虫GIL修改多线程实例讲解
2020/11/24 Python
css3 条纹化和透明化表格Firefox下测试成功
2014/04/15 HTML / CSS
法国和欧洲海边和滑雪度假:Pierre & Vacances
2017/01/04 全球购物
综合办公室主任岗位职责
2014/04/13 职场文书
大学生工作求职信
2014/06/23 职场文书
家长学校培训材料
2014/08/20 职场文书
诚信承诺书
2015/01/19 职场文书
美术教师个人工作总结
2015/02/06 职场文书
审美与表现自我评价
2015/03/09 职场文书
2016年习总书记讲话学习心得体会
2016/01/20 职场文书