vue 限制:不登录无法进入其他页面
2024-01-03 10:35:50
vue限制不登录,通过url进入其他页面强制回到登录页面;已经登录的情况下,不可以再进入登录界面
参数说明:
- to: Route: 即将要进入的目标(路由对象)
- from: Route: 当前导航正要离开的路由
- next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
1.先在router下的index.js添加 meta:{requireAuth:true}
,如下:
{
path: '/data',
name: 'data',
component: data,
meta:{requireAuth:true}
},
2.然后在main.js添加如下代码:
router.beforeEach((to, from, next) => {
if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
if(localStorage.getItem('userInfo')){ //判断本地是否存在access_token
next();
}else {
if(to.path === '/login'){
next();
}else {
alert('请先进行登录!')
next({
path:'/login'
})
}
}
}
else {
next();
}
/*如果本地 存在 token 则 不允许直接跳转到 登录页面*/
if(to.fullPath == "/login"){
if(localStorage.getItem('userInfo')){
alert('您已经登录了,如果想要登录其他账号,请先退出当前账号!')
next({
path:from.fullPath
});
}else {
next();
}
}
});
或者是:
router.beforeEach((to, from, next)=> {
let userInfo = localStorage.getItem('userInfo')
let list = ['login','checking','register','phoneLogi','chat','GroupSharing','new_file','videoChat',]//多个路由
if (userInfo || list.indexOf(to.name) !== -1) {
next()
}
else {
next({
name:'login'
})
}
// next()
})
文章来源:https://blog.csdn.net/weixin_48596030/article/details/135355777
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!