vue先後端分離項目作權限控制、自動登錄、h5 history模式及404頁面

本文來談談先後端分離的項目如何作權限控制和自動登錄，如何應用history模式使網址看起來和傳統無差，以及設置404頁面，以vue爲例。

自動登錄

自動登錄通常是經過cookie和session的配合實現的。原理是登錄完成後服務端將用戶信息保存在session中，並將sessionid保存在cookie中發送給客戶端。客戶端將cookie存起來，下次訪問時帶上cookie(若是沒有過時)發起請求，服務端收到請求從cookie裏獲取sessionid來找到session，若是session還在的話就認爲此用戶不須要登錄了，給他返回他須要的數據。不然就跳轉到登錄頁面。

看起來好像很複雜，實際應用起來卻十分簡單，由於前人已經爲咱們作了不少工做，不少框架裏使用session便會自動生成cookie發往客戶端，客戶端(瀏覽器)會自動保存cookie(沒有禁用cookie的話)，下次發送請求的時候客戶端也會自動帶上cookie，服務端的session包會自動從相關cookie的信息裏找到session。不少工做庫和瀏覽器已經幫咱們作了，其實咱們只須要作兩個事：一、存session 二、判斷session是否有效。

咱們經過session和cookie的過時時間來設置自動登錄的有效期，通常二者設置相同的時間，由於cookie很容易僞造。session的儲存位置也頗有講究，能夠儲存在文件系統裏、內存裏、redis，單臺服務器存在文件系統裏就好了，分佈式系統的話就得用redis了。

原理講完了，下面說應用。傳統後端項目自動登錄沒前端啥事，但在先後端分離的項目裏，控制路由跳轉的邏輯都在前端，先後端經過接口來交流，咱們只須要在首次進入前端單頁應用時給後端發送一個請求，帶上cookie讓後端返回是否登錄，若是後端返回爲403則前端控制跳轉登錄頁面。

權限控制

並非全部頁面都是開放的，有些頁面須要登錄後或者一些權限才能使用，這時候就須要用到權限控制，這個工做在先後端分離的項目裏，先後端都要作。

前端

先說前端，由於有些接口須要用戶id等信息，因此咱們須要用到vuex來儲存全局數據，同時配合vue-router的meta元數據和鉤子實現權限控制。vue-router文檔裏有介紹。

具體應用就是給須要權限的路由加上mete字段，在進入每一個路由前調用鉤子，若是須要權限而且沒有vuex裏user信息，就發起檢查登錄請求，若是已登錄這個請求會返回用戶信息並存在vuex裏，不然返回403錯誤碼前端跳轉登錄。這樣前端只須要進入頁面檢查一次登錄就好了，須要用戶信息的接口去vuex取便可，必要時能夠手動刷新user數據。固然刷新頁面後vuex便清空了，須要從新檢查登錄，有須要的話能夠儲存在localstorage或cookie裏。註銷的時候調用註銷接口後端清除session，前端清除user

代碼片斷：

// router.js router文件裏
routes: [
    {
      path: '/login',
      component: Foo,
    },
    {
      path: '/user',
      component: Foo,
      meta: { requiresAuth: true }
    },
]


router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.auth !== false) && !store.state.user) {
        store.dispatch('checkLogin', next);
    } else {
        next();
    }
});


// store.js vuex文件裏
actions: {
    // 檢查登錄
    checkLogin({commit}, next) {
        axios('get', '/check-auth')
            .then(res => {
                if (res.status == 200) {
                    commit('user', res.data.data);
                    next();
                }
            })
            .catch(err => {
                commit('user', null);
                next('/login');
            })
    },
}

後端

雖然前端作了權限控制，可是後端也須要作接口權限控制，防止接口被濫用。web安全是一個很大的話題，本人對這方面瞭解的不是很深刻，只能淺顯的談談。好比應用https保證傳輸安全；請求時帶上xrsf-token；服務端對Access-Control-Allow-Origin作限制，防止跨域請求。若是是受權的話使用oauth2.0方案，若是是簡單的基於登錄的應用，在後端寫一箇中間件，須要登錄權限的接口都走這個中間件，未登錄便不返回數據。

history網址模式

什麼是history模式？vue-router文檔裏介紹的比較清楚了

vue-router 默認 hash 模式 —— 使用 URL 的 hash 來模擬一個完整的 URL，因而當 URL 改變時，頁面不會從新加載。

history 模式利用 history.pushState API 來完成 URL 跳轉而無須從新加載頁面。當你使用 history 模式時，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

vue等單頁應用的網址是經過hash模擬實現的，實際上是網址加上#path，這樣不光很醜陋還佔用了錨點，並且在不少請求中#hash部分會被忽略，例如微信開發中。react-router就提到，每一個人都應該使用history模式。

開啓history模式須要後端配置，通常是在web代理服務器上配置，也能夠經過後端路由來重定向。例如用的較多的ngnix配置:

location / {
  try_files $uri $uri/ /index.html;
}

配置很簡單，這配置是什麼意思？爲何須要這麼作呢？若是http://yoursite.com指向你的單頁的index.html這個文件，那會打開這個html並運行其中的js，你的應用就呈現給用戶了。可是你訪問http://yoursite.com/user，這個網址並無指向靜態文件，也沒有後端路由去處理他，就會出現404，瀏覽器根本找不到你的單頁入口。經過這個配置，訪問http://yoursite.com/user服務器嘗試尋找index.html入口文件，在瀏覽器拿到html和js運行後，vue-router會分析url之中的path:/user，利用js控制理由渲染user頁面。

404頁面

用戶總會不當心誤入歧途，因此你須要一個404頁面帶她回家。配置404頁面很簡單，就是寫一個路由匹配全部路徑(*)，放在最後，匹配不到的都會進入404頁面。

代碼片斷：

// router.js router文件裏
routes: [
    {
      path: '/login',
      component: Foo,
    },
    {
      path: '/user',
      component: Foo,
      meta: { requiresAuth: true }
    },
    // 必定要在最後
    {
      path: '*',
      component: 404,
      meta: { requiresAuth: true }
    },
]