angular.js - 前後端分離的單頁應用程式如何來判斷目前使用者的登入狀態？

Question

有個單頁應用的url例如http://cctv.com/!#/car/list,只有在登入的情況下，我才可以去訪問這個url，如果不是登入狀態，則要跳到登入頁面。

以前的話，請求url到後台，後台會判斷下當前用戶是否登錄，但是現在做成單頁應用了，也不需要請求到後台了，那麼在單頁應用的情況下如何來處理用戶是否已經登錄了的狀態呢？

Answer 1

history.listen(location => {
  const pathname = location.pathname;
  if (pathname !== '/login' && pathname !== '/logout') {
    dispatch({
      type: 'check',
      payload: pathname
    });
  }else if(pathname === '/logout'){
    dispatch({
      type: 'logout',
      payload: pathname
    });
  }
});

*check({ payload }, { select, call, put }) {
  const { isLogin, lastCheck, interval } = yield select( ({ auth }) => auth);
  const now = (new Date()).getTime();
  yield put({
    type: 'authRedirect',
    payload,
  })
  if (!isLogin){
    yield put(routerRedux.push('/login'));
    return ;
  }
  //是否异步检测
  if (!interval || (now - lastCheck) < interval  ){
    return;
  }
  const { data, err } = yield call(fresh);
  if (data && data.status==0) {
    yield put({
      type: 'freshSuccess',
      payload: data.data,
    });
    return ;
  }
  yield put(routerRedux.push('/login'));
}

// fresh login status
export async function fresh(params) {
  return request(`/api/auth/fresh?${qs.stringify(params)}`);
}

監聽 url 變化，如果不是login logout 就檢查登入狀態。
檢查登入狀態

1. 檢查js變量，沒有登入就直接跳登入頁

2. 如果js變數已經登錄，就判斷一下是否需要非同步偵測 不需要偵測就結束(例如上次偵測是在60秒內)。

3. 如果需要非同步檢測，就非同步檢測是否登錄，如果成功 刷新一下lastcheck時間。

4. 如果偵測沒有登錄，就直接跳登入頁

Answer 2

登陸後後端api給token，前端儲存token，存取需要登入的傳token過去。前端路由中判斷，是否有token，無就轉登入。另外前端有非同步互動api的錯誤處理，例如後端錯誤代碼是token過期了什麼的錯誤，前端清除之前token，轉登入。

Answer 3

現在通常的做法是前端把使用者名稱和密碼透過api送到後台，至於是否保持登入狀態，由後台去設定cookie，前台不需要做任何事情

Answer 4

透過localStorange儲存登入狀態，不過毫無安全性可言

Answer 5

登陸狀態由後端存入cookie就可以了。你不用考慮。

Answer 6

讓後台set cookie就行了。

後台set cookie後，前端在請求的時候，header都會自動帶過去的。

接著約定一個狀態碼，當請求回來的是特定的狀態碼的時候，就跳到登入頁面。

Answer 7

無論什麼情況，前端都不知道使用者是誰，使用者是否登入。那誰知道呢？後端！

所以，你每次只要把後端給你的登入態資訊再給後端，讓後端校驗就行了。

1、你可以存在cookie中，每次請求發出去。當然，這個對你可以是透明的，讓後端來種cookie，同時設定成http only的。

2、因為是單頁，也可以存在記憶體的某個全域變數中，如果沒有則未登入。

3、可以自行快取token，每次發送請求手動帶過去。

Answer 8

具體看你後台怎麼支持，token和cookie這兩個種方法都可以

Answer 9

loopback+vue+vue-resource,前後端分離模板,vue page分頁功能,authenticate 權限控制,accesstoken機制,credentials,CI,docker

https://github.com/qxl1231/ge...

直接看我這個專案範例就知道啦.整套完整解決方案