vue-router判断页面未登录自动跳转到登录页的方法示例
1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录
下面的两个页面,登录页不需要检测,首页需要检测
constrouters=[ { path:'/', component:App, children:[ { path:'/login', component:Login, meta:{ title:'登录' } }, { path:'/home', component:Home, meta:{ title:'首页', requireAuth:true } } ] } ] exportdefaultrouters
2.main.js
返回遍历的某个路由对象,我们定义为record,检测这个对象是否拥有meta这个对象,如果有meta这个对象,检测meta对象是不是有requireAuth这个属性且为true
检测到需要登录权限后,我的做法是请求接口判断用户是否登录
如果未登录,跳转到登录页面;如果已经登录,确保要调用next()方法,否则钩子就不会被resolved
router.beforeEach((to,from,next)=>{ /*页面title*/ if(to.meta.title){ document.title=to.meta.title } /*判断该路由是否需要登录权限*/ if(to.matched.some(record=>record.meta.requireAuth)){ //是否登录 axios.post('/home/user/isLogin') .then(function(response){ if(response.data.code==0){ //未登录 if(response.data.data.online==0){ next({ path:'/login', }) }else{ //已登录 next() } } }) .catch(function(error){ //Toast(error.data.msg); }); } next(); })
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。