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自定义复制指令 v-copy,使用自定义指令创建一个点击复制文本功能，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-01-01
这篇文章主要介绍了前端Vue.js实现json数据导出到doc，文章围绕主题展开详细的内容介绍，具有一定的参考价值，需要的小伙伴可以参考一下2022-09-09
这篇文章主要介绍了解决el-date-picker日期选择控件少一天的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了Vue3 Composition API的使用简介，帮助大家更好的理解和学习使用vue，感兴趣的朋友可以了解下2021-03-03
今天小编就为大家分享一篇Vue.set()动态的新增与修改数据,触发视图更新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了vue实现登录时图形验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
vue3+vite使用History路由模式打包部署项目的步骤及注意事项
这篇文章主要介绍了vue3+vite使用History路由模式打包部署项目的步骤及注意事项,配置过程包括在Vue项目中设置路由模式、调整打包配置以及Nginx服务器的配置,正确的部署配置能够确保应用顺利运行,提升用户体验,需要的朋友可以参考下2024-10-10
这篇文章主要介绍了搭建vue开发环境的方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了使用vue实现grid-layout功能的代码讲解,需要的朋友可以参考下2018-01-01
关于Vue的 watch、computed和methods的区别汇总
这篇文章主要介绍关于Vue的 watch、computed和methods的区别，下面文章将围绕Vue的 watch、computed和methods的续航管资料展开全文它们之间区别的内容,需要的朋友可以参考一下，希望能帮助到大家2021-11-11
最新评论