vue路由跳转时判断用户是否登录功能的实现
更新时间：2017年10月26日 10:04:55 投稿：jingxian
下面小编就为大家带来一篇vue路由跳转时判断用户是否登录功能的实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
通过判断该用户是否登录过，如果没有登录则跳转到login登录路由，如果登录则正常跳转。
一丶首先在用户登录前后分别给出一个状态来标识此用户是否登录（建议用vuex）；
简单用vuex表示一下，不会可以自己去官网多看看；
import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex);
var state = {
isLogin:0, //初始时候给一个 isLogin=0 表示用户未登录
};
const mutations = {
changeLogin(state,data){
state.isLogin = data;
}
};
二丶在用户登录时改变登录状态；
this.$store.commit(‘changeLogin‘,‘100‘) //登录后改变登录状态 isLogin = 100 ；
三丶重点来了；
在你的路由入口加上导航钩子，具体什么意思看代码；
一丶设置需要校验的路由
{ path: ‘/admin‘,
component: Admin,
meta:{auth:true} // 设置当前路由需要校验 不需要校验的路由就不用写了；不要问为什么，自己去看官网
}
二丶路由跳转并校验
router.beforeEach((to,from,next) => {
if(to.matched.some( m => m.meta.auth)){
// 对路由进行验证
if(store.state.isLogin==‘100‘) { // 已经登陆
next() // 正常跳转到你设置好的页面
}
else{
// 未登录则跳转到登陆界面，query:{ Rurl: to.fullPath}表示把当前路由信息传递过去方便登录后跳转回来；
next({path:‘/login‘,query:{ Rurl: to.fullPath} })
}
}else{
next()
}
})
以上这篇vue路由跳转时判断用户是否登录功能的实现就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue如何根据id在数组中取出数据，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要给大家介绍了关于vue打包上传服务器刷新404问题的两种方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
这篇文章主要介绍了vue3.0实现插件封装的方法，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下2020-12-12
这篇文章要给大家介绍的是vue和drf以及第三方滑动验证码接入的实现，下文小编讲详细讲解该内容，感兴趣的小伙伴可以和小编一起来学习奥2021-10-10
vue3+vite3+typescript实现验证码功能及表单验证效果
这篇文章主要介绍了vue3+vite3+typescript实现验证码功能及表单验证效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
今天小编就为大家分享一篇解决Vue2.0中使用less给元素添加背景图片出现的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
下面小编就为大家分享一篇完美解决iview 的select下拉框选项错位的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要介绍了vue3关于ref和reactive的区别分析，文中通过示例代码介绍的非常详细，具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧2023-06-06
这篇文章主要为大家介绍了Yarn与Lerna管理monorepo的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
axios 发 post 请求，后端接收不到参数的完美解决方案
这篇文章主要介绍了axios 发 post 请求，后端接收不到参数的解决方案,场景很简单，就是一个正常 axios post 请求，本文给大家分享问题原因分析及解决方案需要的朋友可以参考下2022-12-12
最新评论