这篇文章主要为大家详细介绍了vue-router判断页面未登录自动跳转到登录页的方法示例,具有一定的参考价值,可以用来参考一下。
感兴趣的小伙伴,下面一起跟随四海网的小编两巴掌来看看吧!
1.定义路由的时候配置meta属性,requireAuth用来标记跳转的这个路由是否需要检测登录
下面的两个页面,登录页不需要检测,首页需要检测
代码如下:
const routers = [
{
path: '/',
component: App,
children: [
{
path: '/login',
component: Login,
meta: {
title: '登录'
}
},
{
path: '/home',
component: Home,
meta: {
title: '首页',
requireAuth: true
}
}
]
}
]
export default routers
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();
})
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持四海网。
本文来自:http://www.q1010.com/184/6623-0.html
注:关于vue-router判断页面未登录自动跳转到登录页的方法示例的内容就先介绍到这里,更多相关文章的可以留意四海网的其他信息。
关键词:vue.js
四海网收集整理一些常用的php代码,JS代码,数据库mysql等技术文章。