angular.js - How to determine the login status of the current user in a single-page application with separate front-end and back-end?

Question

There is a single-page application URL such as http://cctv.com/!#/car/list. I can only access this URL when I am logged in. If I am not logged in, I have to jump to the login page.

In the past, if you requested the url to the background, the background would determine whether the current user is logged in, but now it is a single-page application, and there is no need to request to the background. So in the case of a single-page application, how to handle whether the user is logged in? What about the status of logged in?

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