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...

直接看我这个项目示例就知道啦.整套完整解决方案