vue--登录

总算啃完一个项目的大头部分了，后面会慢慢记录在这个项目中遇到的问题以及解决办法。

今天要写的就是登录模块了，项目里面有些页面不登录就可以查看，有些必须登录才能查看。我的解决方法是通过路由防卫来实现的，这里拿登录、首页和个人中心页面来记录一下，进入首页是不需要登录的，个人中心必须登录才可以。

1.router下的index.js里面的相关操作

首先引入相关的文件例如：

import login from '@/page/login/login'
import index from '@/page/index/index'
import user from '@/page/user/user'

配置相关路由meta 字段，示例代码：

Vue.use(Router)
export default new Router({
  routes: [
    { path: '/', name: 'index', component: index },
    { path: '/index', name: 'index', component: index},  //首页
    { path: '/user', name: 'user', component: user, meta:{requireAuth:true}},  //我的
    ]
})

2.main.js里面的相关操作

注册一个全局的前置守卫，若需要登录权限则先判断是否登录，未登录则跳转到登录页面，已登录则跳转到目标页面；若不需要登录权限则直接跳转到目标页面

router.beforeEach((to, from, next) => {
  if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
    if(window.localStorage.getItem('uid')){ //判断本地是否存在uid
      next();
    }else {
      next({
        path:'/login'
      })
    }
  }
  else {
    next();
  }
  /*如果本地 存在 本地存储 则 不允许直接跳转到 登录页面*/
  if(to.fullPath == "/login"){
    if(window.localStorage.getItem('uid')){
      next({
        path:from.fullPath
      });
    }else {
      next();
    }
  }
});

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

注意：这个全局钩子要放到全局组件的前面，放到全局组件的后面，Vue实例已经加载完成，这一段就没有意义了

3.login登录页面

//提交登录表单
submit:function(){
  var that = this;
  //接口部分已略
  console.log("登录成功");
  window.localStorage.setItem('uid', '接口返回的uid');
},

说明：在这次项目中用的是开始用的localStorage，后面想改成cookie的时候整个项目已做好了一大半，项目比较大用到的地方比较多，最后也没修改。后面的项目在一开始就用cookie或者其它存储方式来写

猜你喜欢