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或者其它存儲方式來寫