vue-router vuex 用户信息管理
实现原理: 每次进行路由跳转检测全局下用户信息状态是否存在
新建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 用户信息管理的更多相关文章
- Vue3: 如何以 Vite 创建,以 Vue Router, Vuex, Ant Design 开始应用
本文代码: https://github.com/ikuokuo/start-vue3 在线演示: https://ikuokuo.github.io/start-vue3/ Vite 创建 Vue ...
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue、Vuex+Cookie 实现自动登陆 。
概述 1.自动登陆实现思路. 2.vuex + cookie 多标签页状态保持. 自动登陆的需求: 1.登陆时勾选自动登陆,退出登陆或登陆到期后再次登陆后自动填写表单(记住密码)或访问登陆页自动登陆. ...
- 深入浅出的webpack4构建工具--webpack4+vue+route+vuex项目构建(十七)
阅读目录 一:vue传值方式有哪些? 二:理解使用Vuex 三:webpack4+vue+route+vuex 项目架构 回到顶部 一:vue传值方式有哪些? 在vue项目开发过程中,经常会使用组件来 ...
- python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)
昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...
- 前端Vue框架-vuex状态管理详解
新人报道!多多关照-多提宝贵意见 谢谢- vuex理解 采用集中式存储管理模式.用来管理组件的状态,并以自定义规则去观测实时监听值得变化. 状态模式管理理解 属性 理解 state 驱动应用的数据源 ...
- Vue+Vant+Vuex实现本地购物车功能
通常,我们做移动端商城的时候,通常会有购物车模块,那购物车模块有两种实现方式,一是储存在后台通过接口获取到购物车信息,二是存在用户手机本地,第一种方法只要调用接口获取比较简单,这里介绍的是第二种方法, ...
- 十、Vue:Vuex实现data(){}内数据多个组件间共享
一.概述 官方文档:https://vuex.vuejs.org/zh/installation.html 1.1vuex有什么用 Vuex:实现data(){}内数据多个组件间共享一种解决方案(类似 ...
随机推荐
- SQLServer学习-- Microsoft SQL Server 2008 Management Studio Express
Microsoft SQL Server 2008 Management Studio Express is a free, integrated environment for accessing, ...
- mybaits foreach
<select id="selectQuickConsultDoctorList" resultMap="BaseResultMap" parameter ...
- 【Head First Java 读书笔记】(七)继承
继承与多态 了解继承 继承的关系意味着子类继承了父类的实例变量和方法.父类比较抽象,子类比较具体. 继承层次的设计 找出具有共同属性和行为的对象(用继承来防止子类中出现重复的程序代码) 设计代表共同状 ...
- 深入理解java虚拟机(三)对象回收判断算法以及死亡过程
在堆里面存放着Java几乎所有的对象实例,垃圾收集器要进行垃圾回收,要做的第一步便是找出那些对象是需要回收的. 怎么判断对象是否需要回收? 常用的方法有两种. 1.引用计数算法.为每一个对象添加一个引 ...
- mysql按照天或小时group分组统计
select DATE_FORMAT( deteline, "%Y-%m-%d %H" ) , COUNT( * ) FROM test GROUP BY DATE_FORMAT( ...
- duilib入门简明教程 -- 界面布局(9)
上一个教程实现的标题栏代码中,并没有看到处理自适应窗口大小的代码,但是窗口大小变化后,按钮的位置会跟着变化,这是因为我们将按钮放到了HorizontalLayout.VerticalLayou ...
- 基于node.js+socket.io+html5实现的斗地主游戏(1)概述
一.游戏描述 说是斗地主游戏,其实是寝室自创的"捉双A",跟很多地方的捉红10.打红A差不多,大概规则是: 1.基础牌型和斗地主一样,但没有大小王,共52张牌,每人13张,这也是为 ...
- 13种PDF转图片的案列
Acrobat.dllc#PDFPDFRender4NET.dllpdf转图片 GitHub Clone Adress : https://github.com/stone0090/OfficeToo ...
- Data Base Oracle 常用命令
Data Base Oracle 常用命令 1.登录:(不需要密码,属于管理员权限) conn /as sysdba; 2.查看数据库存储位置: select name from v$datafil ...
- C++中cin输入问题
场景:cin输入一个整数,但是在console输入了其他如字符,字符串.当判断输入错误再重新输入时[ 如while()内重复判断知道输入格式正确 ],可能进入死循环. 解释:console输入时所按的 ...