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

Monitor url changes, if it is not login logout, check the login status.
Check login status

1. Check js variables and jump directly to the login page without logging in

2. If the js variable has been logged in, determine whether asynchronous detection is needed and end if no detection is required (for example, the last detection was within 60 seconds).

3. If asynchronous detection is required, asynchronously check whether to log in, and if successful, refresh the timelastcheck.

4. If you detect that you are not logged in, jump directly to the login page

Answer 2

After logging in, the back-end api gives the token, the front-end stores the token, and passes the token if you need to log in for access. The front-end routing determines whether there is a token, and if not, log in. In addition, the front-end has error handling for asynchronous interactive APIs. For example, the back-end error code indicates that the token has expired. The front-end clears the previous token and switches to login.

Answer 3

The common practice now is that the front-end sends the username and password to the backend through the API. As for whether to stay logged in, the backend sets the cookie, and the frontend does not need to do anything

Answer 4

Storage login status through localStorange, but there is no security at all

Answer 5

The login status is stored in the cookie by the backend. You don't have to think about it.

Answer 6

Just let the background set cookies.

After setting the cookie in the background, the header will be automatically brought over when the front end makes a request.

Then agree on a status code. When the request returns a specific status code, it will jump to the login page.

Answer 7

No matter what the situation, the front end does not know who the user is or whether the user is logged in. So who knows? rear end!

So, you only need to give the login status information that the backend gives you every time and let the backend verify it.

1. You can store it in a cookie and send it out every time you request it. Of course, this can be transparent to you, let the backend plant cookies, and set it to http only.

2. Because it is a single page, it can also be stored in a global variable in the memory. If not, it will not be logged in.

3. You can cache the token yourself and bring it manually every time you send a request.

Answer 8

It depends on how your backend supports it. Both token and cookie methods are acceptable

Answer 9

loopback+vue+vue-resource, front-end and back-end separation templates, vue page paging function, authenticate permission control, accesstoken mechanism, credentials, CI, docker

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

Just look at my project example to find out. The complete solution