search

Home  >  Q&A  >  body text

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

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?

给我你的怀抱给我你的怀抱2798 days ago1014

reply all(9)I'll reply

  • 给我你的怀抱

    给我你的怀抱2017-05-15 17:11:32

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    <code class="js">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

        });

      }

    });</code>

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    <code class="js">*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'));

    }</code>

    1

    2

    3

    4

    5

    <code class="js">// fresh login status

    export async function fresh(params) {

      return request(`/api/auth/fresh?${qs.stringify(params)}`);

    }

    </code>

    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

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-15 17:11:32

    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.

    reply
    0
  • 曾经蜡笔没有小新

    曾经蜡笔没有小新2017-05-15 17:11:32

    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

    reply
    0
  • 天蓬老师

    天蓬老师2017-05-15 17:11:32

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

    reply
    0
  • 伊谢尔伦

    伊谢尔伦2017-05-15 17:11:32

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

    reply
    0
  • PHP中文网

    PHP中文网2017-05-15 17:11:32

    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.

    reply
    0
  • phpcn_u1582

    phpcn_u15822017-05-15 17:11:32

    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.

    reply
    0
  • 某草草

    某草草2017-05-15 17:11:32

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

    reply
    0
  • 我想大声告诉你

    我想大声告诉你2017-05-15 17:11:32

    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

    reply
    0
  • Cancelreply