实现原理: 每次进行路由跳转检测全局下用户信息状态是否存在

新建store.js文件

import Vue from 'vue';
import Vuex from 'vuex'; Vue.use(Vuex); let store = new Vuex.Store({
state: {
userInfo: null
},
mutations: {
GETSTATE (state, data) {
state[data.name] = data.value;
}
},
actions: {
getState (context, data) {
context.commit('GETSTATE', data);
}
}
}) export default store

新建router.js文件

import Vue from 'vue';
import Router from 'vue-router';
import store from '@/stores';
import api from '@/api';
Vue.use(Router);

import layout from '@/components/layout/layout.vue';

const router = new Router({
routes: [
{
path: '/',
redirect: {
name: 'home'
}
},{
name: 'main',
path: '/main',
component: layout,
children: [
{
name: 'home',
path: '/home',
component: component: () => import('@/views/home/home')
}
]
}
]
}) router.beforeEach((to, from, next) => {
// 验证是否登录
if (store.state.userInfo) {
next();
} else {
api.base.getUserInfo().then((res) => {
if (res) {
store.dispatch('getState', { name: 'userInfo', value: res.data });
next();
}
})
}
})
export default router

vue-router vuex 用户信息管理的更多相关文章

  1. Vue3: 如何以 Vite 创建,以 Vue Router, Vuex, Ant Design 开始应用

    本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...

  2. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  3. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  4. Vue、Vuex+Cookie 实现自动登陆 。

    概述 1.自动登陆实现思路. 2.vuex + cookie 多标签页状态保持. 自动登陆的需求: 1.登陆时勾选自动登陆,退出登陆或登陆到期后再次登陆后自动填写表单(记住密码)或访问登陆页自动登陆. ...

  5. 深入浅出的webpack4构建工具--webpack4+vue+route+vuex项目构建(十七)

    阅读目录 一:vue传值方式有哪些? 二:理解使用Vuex 三:webpack4+vue+route+vuex 项目架构 回到顶部 一:vue传值方式有哪些? 在vue项目开发过程中,经常会使用组件来 ...

  6. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  7. 前端Vue框架-vuex状态管理详解

    新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...

  8. Vue+Vant+Vuex实现本地购物车功能

    通常,我们做移动端商城的时候,通常会有购物车模块,那购物车模块有两种实现方式,一是储存在后台通过接口获取到购物车信息,二是存在用户手机本地,第一种方法只要调用接口获取比较简单,这里介绍的是第二种方法, ...

  9. 十、Vue:Vuex实现data(){}内数据多个组件间共享

    一.概述 官方文档:https://vuex.vuejs.org/zh/installation.html 1.1vuex有什么用 Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似 ...

随机推荐

  1. HDU 1111 Secret Code (DFS)

    题目链接 题意 : 给你复数X的Xr和Xi,B的Br和Bi,让你求一个数列,使得X = a0 + a1B + a2B2 + ...+ anBn,X=Xr+i*Xi,B=Br+Bi*i : 思路 : 首 ...

  2. 编写高质量代码改善C#程序的157个建议——建议120:为程序集指定强名称

    建议120:为程序集指定强名称 虽然强名称在设计之初有防止被未授权的第三方软件非法执行程序的作用,但是因为它的破解方法并不难,所以现在强名称更多的意义在于它可以避免出现“DLL HELL”现象. “D ...

  3. T4模板调用反射

    <#@ template debug="false" hostspecific="true" language="C#" #> ...

  4. django view 装饰器

    Django提供了几个可以应用于视图以支持各种HTTP特性的装饰器 Allowed HTTP django.views.decorators.http里的装饰器可以根据请求方法限制对视图的访问. re ...

  5. .CHM文件使用问题

    1.查看时内容为空---解除锁定 解决方案:选中xx.CHM,右键点击属性,常规选项卡中点击“解除锁定”.OK了 2.内容显示乱码---修改浏览器编码 IE中的查看 > 编码 > 自动选择 ...

  6. tf-idf sklearn

    第一步:语料转化为词袋向量 step 1. 声明一个向量化工具vectorizer: 本文使用的是CountVectorizer,默认情况下,CountVectorizer仅统计长度超过两个字符的词, ...

  7. StratifiedShuffleSplit()函数 实现对数据集的划分

    sklearn.model_selection.StratifiedShuffleSplit(n_splits=10, test_size=’default’, train_size=None, ra ...

  8. Windows下Oracle的下载与安装及配置

    一.Oracle下载 官网地址:http://www.oracle.com/technetwork/database/enterprise-edition/downloads/index.html 百 ...

  9. [Swift实际操作]八、实用进阶-(4)通过protocol在两个对象中进行消息传递

    本文将演示如何借助协议,实现视图控制器对象和其内部的自定义视图对象之间的数据传递. 首先创建一个自定义视图对象.在项目名称文件夹点击鼠标右键New File ->Cocoa Touch Clas ...

  10. 简单的数字校验JS

    /** *张衍涛 * 数字校验 v:校验的元素 l:要保留的小数点位数 */ function checkNumber(v,l){ var val=v.value; if(isNaN(val) || ...