vue router+vuex实现首页登录验证判断逻辑
更新时间：2018年05月17日 14:50:29 作者：tinaawang
这篇文章主要介绍了vue router+vuex实现首页登录判断逻辑，用于判断是否登录首页，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
首页登录逻辑要求在页面上判断是否获取到登录token ，没有获取到则跳转到登录页。登录成功后，跳转到前一个页面。
1.vue router
路由判断首先我们想到的是router.beforeEach 前置导航守卫 ，这个方法接受三个参数 to from next 。
to参数为即将跳转的路由路径，from为当前导航正要离开的路由，next方法用来resolve这个钩子。
下面以工作中写的一个判断为为例子：
router.beforeEach(async (to, from, next) => {
const { name, meta } = to;
const { requireLogin } = meta;
if (name === 'login') { // 如果是登录页则用next方法resolve掉这个钩子，如果不是，进行到下一个判断
return next();
}
const needLogin = requireLogin && !store.getters.user.isLogin; // 从store中读取是否获取了已登录的信息
if (needLogin) {
return next({ // 如果没有则跳转到登录页，将当前路由路径放到参数中
name: 'login',
params: { back: to },
});
}
return next();
});
2. this.$router 与 this.$route this.$router.push 与 this.$router.replace
在登录页完成登录请求后进行下面的操作
获取路径中存放前一个路径的参数 ,然后跳转到该页面
loginSuccess() {
const { params: { back } } = this.$route;
const route = back || { name: 'home' };
const { name, params, query } = route;
this.$router.replace({ name, params, query });
},
在上面这段代码中出现了两个我们经常混淆的概念:
我们知道this.$router是router实例，可以用来直接访问路由。我们称router配置中每一个对象为一个路由记录，this.$route是暴露出来用来访问每个路由记录的。因此我们获取参数时使用的是this.$route 跳转路由时使用的是道this.$router。
上端代码中我们使用了replace而不是push来跳转路由，这两者的区别是会不会在history中产生记录。replace不会新增记录，而是直接替换掉了这条路由记录。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
今天小编就为大家分享一篇解决vue语法会有延迟加载显现{{xxx}}的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
今天小编就为大家分享一篇解决vue打包css文件中背景图片的路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
今天小编就为大家分享一篇对Vue.js之事件的绑定(v-on: 或者 @ )详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue实现html转化pdf的两种方式,分别为能复制文字和不能复制文字的方法,有需要的小伙伴可以跟随小编一起学习一下2024-10-10
本篇文章主要介绍了vue学习笔记之v-if和v-show的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
这篇文章主要介绍了使用vuepress搭建静态博客的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-02-02
这篇文章主要介绍了vue+echarts绘制省份地图并添加自定义标注方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
使用VUE和webrtc-streamer实现实时视频播放(监控设备-rtsp)
WebRTC-streamer是一项使用简单机制通过WebRTC流式传输视频捕获设备和RTSP源的实验,下面这篇文章主要给大家介绍了关于如何使用VUE和webrtc-streamer实现实时视频播放(监控设备-rtsp)的相关资料,需要的朋友可以参考下2022-11-11
使用vue-antDesign menu页面方式(添加面包屑跳转)
这篇文章主要介绍了使用vue-antDesign menu页面方式(添加面包屑跳转),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
这篇文章介绍了vue实现大文件分片上传与断点续传到七牛云的方法，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
最新评论