Vue——路由：登录状态的判断

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

在搭建的系统中，最基本的登录都是必须的，结合Vue的路由，涉及最多的就是登录状态的判断。也就是说，如果一个组件要校验登录状态，则在用户初始进入时，就要去判断用户是否登录，这里的校验登录状态就是本篇的重点。

直接上实例，需要的拿走

一、router / index.js 路由中加校验

export default new Router({
routes: [
{
path: '/',
name: 'login',
component: login
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/componentA',
name: 'componentA',
component: componentA,
meta:{
requireLogin:true // 当前路由需要校验，不需要就不用写
}
},
{
path: '/componentB',
name: 'componentB',
component: componentB,
meta:{
requireLogin:true
}
},{
path: '/HelloWorld',
name: 'HelloWorld',
component: HelloWorld,
meta:{
requireLogin:true
}
},{
path: '/orderManager',
name: 'orderManager',
component: orderManager,
meta:{
requireLogin:true
}
}
]
})

二、main.js 判断该路由是否需要登录权限

router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requireLogin)){ // 判断该路由是否需要登录权限
if (sessionStorage.getItem('loginInfo')) { // 判断当前用户的登录信息loginInfo是否存在
next();
} else {
next({
path: '/'
})
}
}else {
next();
}})

三、login.vue 登录组件内，登陆成功后的处理

this.$http({
method: 'POST',
url: this.userLoginUrl,
data: param
}).then((res) => {
sessionStorage.setItem('loginInfo',JSON.stringify(res.data.result));
this.$router.push('/HelloWorld'); // 登陆成功后默认跳转的路由
})

四、实现效果

1、在地址栏键入 http://localhost:8080 ，因为路由的原因，直接跳去登录模块，地址栏：http://localhost:8080/#/