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 }); |
