vue的登陆验证及返回登录前页面实现

一、路由配置部分如下所示，

导出路由示例

let router = new VueRouter({

routes: [

// 登陆

{ name: 'login', path: '/login', component: Login },

// 后台管理

{ name: 'admin', path: '/admin', component: Admin, children: [...goods] },

]

});

// 添加路由前置守卫, 其实就是添加一个函数, 这个函数会在路由配置之前执行, 我们可以在这里添加一些登陆或者权限的校验

// to与from是两个对象, 可以拿到url信息

router.beforeEach((to, from, next) => {

// 通过to.name得知用户访问的是什么页面, 如果是admin相关页面, 那么继续判断用户有没有登陆

// 有 => 调用next()通过访问, 没有 => 调用next({name: 'login'})跳转到登陆页面

// 现在我们是在一个js模块当中, 并不是在vue组件中, 所以这里的this不是组件实例, 而是undefined, 无法this.$http与this.$api

Vue.prototype.$http.get(Vue.prototype.$api.islogin).then(res => {

let isLogin = false;

// 已登陆

if(res.data.code == 'logined') {

isLogin = true;

}

// 如果访问登陆页面

// 已登陆 => 为了用户友好体验, 自动跳转到后台管理

// 未登陆 => 允许访问登陆页面

if(to.name == 'login') {

if(isLogin) {

next({name: 'admin'});

}else {

next();

}

}

// 如果访问后台页面

// 已登陆 => 允许访问后台页面

// 未登陆 => 禁止访问, 自动跳转到登陆页面

if(to.name != 'login') {

if(isLogin) {

next();

}else {

// query用来设置url中的查询字符串, 我们这里把用户要访问的页面地址通过query记录下来

// 将来用户登陆成功后, 再自动跳回这个地址

next({name: 'login', query: {next: to.fullPath}});

}

}

})

});

export default router;

二，login 组件 配置部分

 使用了路由插件之后，组件实例就有了该对象，对象有一个Push方法，可以进行路由跳转

let nextPage = this.$route.query.next || '/admin';

// 登陆成功后, 跳转到用户未登陆前要访问的页面

this.$router.push({ path: nextPage });