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的更多相关文章

  1. iframe 的使用和登陆退出的实现——整个页面跳转

    iframe中如果只是页面跳转的话,我们依然只是部分的加载的了,为了实现整个页面的所有内容跳转,下面提供了整个页面跳转的方法. iframe例子 1.总的iframe页面(访问就访问这个)  all. ...

  2. laravel前后端分离的用户登陆 退出 中间件的接口与session的使用

    在项目开发的过程中,需要有用户的登陆 退出 还有校验用户是否登陆的中间件; 基本思路: 登陆: 前端请求接口的参数校验 用户名 密码规则的校验 用户名密码是否正确的校验; 如果上面的校验都通过的了,把 ...

  3. Yii2 前后台登陆退出分离、登陆验证

    这里用的yii2高级模板, 基本模板的配置文件在一个文件里,方法基本没什么区别, 1.用户表要有两个用户表, 当然一个也行,分开是省得麻烦,既然是分离了就彻底分开, 前台表user,后台表user_b ...

  4. netMVC 搭建Ucenter 同步登陆退出discuz

    先看一下效果

  5. 用户登陆,退出等基本Action

    用户登陆页面user_login.jsp对应action为login.do: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ...

  6. php,ajax登陆退出

    利用ajax可以做到页面无刷新登陆. 运行效果 目录结构 site/ css/ images/ js/ site/css/bootstrap.css(bootstrap样式表) site/js/boo ...

  7. 设置UCHome注册登陆退出的跳转页自定义

    UCHome 默认注册.登录成功后跳转到 http://www.xxx.com/home/space.php?do=home 退出后会跳转到站点的首页,即 http://www.xxx.com/hom ...

  8. phpcms v9和discuz X3.1实现同步登陆退出论坛(已实现)

    网络上文章很多,按步骤配置好了之后phpcms可以同步登录dz,但是dz登录后状态却无法同步到phpcms,网络上找了很多资料都大同小异,头大.只能自己调试了,废话不多说了.       以下网络上抄 ...

  9. phpcms 2008和discuz X3.1实现同步登陆退出论坛(已实现)

    网络上文章很多,按步骤配置好了之后phpcms可以同步登录dz,但是dz登录后状态却无法同步到phpcms,网络上找了很多资料都大同小异,头大.只能自己调试了,废话不多说了.       以下网络上抄 ...

随机推荐

  1. Linux CentOS7 VMware linux和windows互传文件、用户配置文件和密码配置文件、用户组管理、用户管理

    一. linux和windows互传文件 X-shell.Securecrt远程终端,与Windows之间互传文件. 安装一个工具lrzsz [root@davery ~]# yum install ...

  2. formatTime() 时间戳,返回数据是计算距离现在的时间

    const formatTime=function(tiem) {//时间转换   const timestamp = Date.now();   return function (tiem) {   ...

  3. php 实现店铺装修3

    /** * @title 装修店铺 * @param plate_id 是 int 店铺装修样式ID * @param type 是 int 模板样式子板块类型(4-海景.6-二宫格.8-三宫格.9- ...

  4. golang的传值调用和传引用调用

    传值还是传引用 调用函数时, 传入的参数的 传值 还是 传引用, 几乎是每种编程语言都会关注的问题. 最近在使用 golang 的时候, 由于 传值 和 传引用 的方式没有弄清楚, 导致了 BUG. ...

  5. JDK8中的ConcurrentHashMap源码

    背景 上文JDK8中的HashMap源码写了HashMap,这次写ConcurrentHashMap ConcurrentHashMap源码 /** * Maps the specified key ...

  6. 算法:辗转相除法求最大公约数(C语言实现)

    辗转相除法,一种求最大公约数的算法 已知:A / B = C ······ R  (A.B.C.R皆是整数) 假设:D是A的余数,D也是B的余数,那么D就是A和B的公约数 D是A和B的约数,则A和B是 ...

  7. BUU re1

    先shift+F12定位到关键句 然后crtl+X查看函数的交叉调用 定位到该函数处 F5查看伪代码 插入一段re1 re2题中都遇到的技巧: 很多时候出现的数字是asc码,热键R可以把数字转化成字母 ...

  8. 吴裕雄--天生自然JAVAIO操作学习笔记:IO操作实例、Scanner、数据操作流与合并流

    import java.io.* ; public class ExecDemo01{ public static void main(String args[]) throws Exception{ ...

  9. IP 和 IP地址的区别和联系

    IP(internet protocol) 网际协议 和IP地址有人会把“IP”和“IP 地址”搞混,“IP”其实是一种协议的名称.IP 协议的作用是把各种数据包传送给对方.而要保证确实传送到对方那里 ...

  10. [noip2014]P2312 解方程

    P2312 解方程 其实这道题就是求一个1元n次方程在区间[1, m]上的整数解. 我们枚举[1, m]上的所有整数,带进多项式中看看结果是不是0即可. 这里有一个技巧就是秦九韶算法,请读者自行查看学 ...