在登陆退出时候使用Vuex
1.登陆的时候,在登陆模块请求接口,然后获取一个access_token,获取用户权限.保存到缓存里面。
2.退出的时候,请求退出接口,把缓存里面的access_token清除。
一旦要在登陆里面做一些行为,比如,在后面新加一些数据传递给登陆接口,做数据收集。就要在登陆的Login.vue模块
里面直接修改。模块里面的代码很多。所有的逻辑都混在一起。
所以可以把登陆和退出的变量和行为抽离出来,在状态管理里统一管理。
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})
把退出,登陆的模块都封装在一个状态模块上面
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
} const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
} const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
}) store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
对用户权限判断是否可以进入某个页面的时候,统一在路由钩子里进行执行。
比如 登陆进首页,需要判断用户权限,从别的页面进首页,仍然要判断用户权限。
如果页面进入分别写在登陆页面,和别的页面,代码就不好维护,都在vue路由的导航守卫里面进行处理
登陆异步代码 ,和login模块里面的回调。
state状态管理里面, mutations是立即执行的,actions 可以是异步的,所以用actions。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex); const loginSet = {
state: {
access_token: null
},
mutations: {
setAccessToken(state, param){
state.access_token = param.value;
}
},
actions: {
loginAsync({ commit }){
return new Promise((resolve, reject)=>{
setTimeout(()=> {
commit({
type: 'setAccessToken',
value: 'ajshdksjjsd' //我随便写了几个值
});
resolve();
}, 1000)
});
}
},
getters: { }
}; const store = new Vuex.Store({
modules: {
login: loginSet
}
}) export {store};
登陆模块的调用,异步回调
this.$store.dispatch('loginAsync').then(()=>{
//如果登陆成功了以后,回调
console.log(this.$store.state.login.access_token);
this.$router.push('首页');
});
在登陆退出时候使用Vuex的更多相关文章
- iframe 的使用和登陆退出的实现——整个页面跳转
iframe中如果只是页面跳转的话,我们依然只是部分的加载的了,为了实现整个页面的所有内容跳转,下面提供了整个页面跳转的方法. iframe例子 1.总的iframe页面(访问就访问这个) all. ...
- laravel前后端分离的用户登陆 退出 中间件的接口与session的使用
在项目开发的过程中,需要有用户的登陆 退出 还有校验用户是否登陆的中间件; 基本思路: 登陆: 前端请求接口的参数校验 用户名 密码规则的校验 用户名密码是否正确的校验; 如果上面的校验都通过的了,把 ...
- Yii2 前后台登陆退出分离、登陆验证
这里用的yii2高级模板, 基本模板的配置文件在一个文件里,方法基本没什么区别, 1.用户表要有两个用户表, 当然一个也行,分开是省得麻烦,既然是分离了就彻底分开, 前台表user,后台表user_b ...
- netMVC 搭建Ucenter 同步登陆退出discuz
先看一下效果
- 用户登陆,退出等基本Action
用户登陆页面user_login.jsp对应action为login.do: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...
- php,ajax登陆退出
利用ajax可以做到页面无刷新登陆. 运行效果 目录结构 site/ css/ images/ js/ site/css/bootstrap.css(bootstrap样式表) site/js/boo ...
- 设置UCHome注册登陆退出的跳转页自定义
UCHome 默认注册.登录成功后跳转到 http://www.xxx.com/home/space.php?do=home 退出后会跳转到站点的首页,即 http://www.xxx.com/hom ...
- phpcms v9和discuz X3.1实现同步登陆退出论坛(已实现)
网络上文章很多,按步骤配置好了之后phpcms可以同步登录dz,但是dz登录后状态却无法同步到phpcms,网络上找了很多资料都大同小异,头大.只能自己调试了,废话不多说了. 以下网络上抄 ...
- phpcms 2008和discuz X3.1实现同步登陆退出论坛(已实现)
网络上文章很多,按步骤配置好了之后phpcms可以同步登录dz,但是dz登录后状态却无法同步到phpcms,网络上找了很多资料都大同小异,头大.只能自己调试了,废话不多说了. 以下网络上抄 ...
随机推荐
- 线程context
线程切换的时候,要保存当前运行状态,以便后续切换回来 CONTEXT结构体保存的是一堆寄存器 两个函数 //You cannot get a valid context for a running t ...
- HashMap1.8之节点删除分析
HashMap之节点删除 大家一直关注的都是HashMap如何添加节点,当节点数量大于8的时候转化为红黑树,否则使用链表等等,但大家是否有看过删除节点的处理逻辑呢? 今天来看看HashMap删除节点的 ...
- Python 2 与 3 共存了 11 年,新年就要和它道别
在 Python 3.9 都已经进入 dev 版本的 2020 年,Python 2 终于要和我们告别了. 2 and 3 Python 2 第一个版本发布于 2000 年 10 月 16 日,到今年 ...
- Linux之文件传输
本文借鉴<Linux命令大全> 1. bye命令 功能:终端FTP连线并结束程序 语法:bye 补充:在ftp模式下,输入bye即可中断目前的连线作业,并结束ftp的执行. 2. ftp命 ...
- centos 虚拟机安装调试
service network restart reboot yum update -y cd /etccd sysconfigcd network-scripts[root@u0mo5 networ ...
- 图片转换到指定大小PDF
1.首先转换为eps jpeg2ps compile to exec file ./jpeg2ps -p a4 a.jpg -o x.eps2.从eps转换到pdf ps2pdf -dDownsa ...
- Eclipse创建一个动态maven项目详细步骤
新建maven项目,new一个Dynamic Web Project 项目 输入完项目名直接finish 配maven,右键项目configure,选择Convert to Plug-in Proje ...
- pip 安装源
pip 安装源 介绍 1.采用国内源,加速下载模块的速度 2.常用pip源: -- 豆瓣:https://pypi.douban.com/simple -- 阿里:https://mirrors.al ...
- js 转换时间戳为时间格式并且按指定格式输出
/** * 时间戳转换为日期 */ function convertTimestamp(timestamp){ // 时间戳转换为日期 var d = new Date(timestamp); // ...
- Hexo搭建个人博客及next主题基本配置
前言 国内一些免费的博客平台比如CSDN.博客园都已经很成熟,功能齐全,已经可以满足我们的需求,帮助我们记录学习过程遇到的问题,还能分享帮助其他人解决问题.为什么还要自己动手去搭建博客呢?首先写博客是 ...