关于前后端分离中token验证问题

Question

我现在搭建一个前后端分离的后台管理页面，前端使用Vue全家桶，用vue-router来处理路由事件，后端语言是node.js，框架是express。后端只负责提供api接口，不涉及处理路由方面的事情。

所以我想请问一下，既然前后端分离了，后端不处理路由问题，那前端如何保证每一个页面都可以验证用户是否有权限访问该页面。

Answer 1

可以看下passport这个库，它里面有各种应对。
另外token最好存在服务器端session，和用户sessionid形成映射.原理基本上是
每次用户加载html就去请求一个api去获取/loginuser 信息，node端一看session里没有token就返回 failed，这样你html页面就弹出login页面。用户登录成功后，获得api access token，这token就和seesionID做一个映射还是存在node这一端，页面还是重定向到index.html，html还是自动请求/loginuser这个时候seesion里已经有token了，就能正常拿着token去call 真正的api了获取user信息了，这样你/loginuser返回就是user信息，你就可以把login的页面关闭了。

补充一下，真实业务api上都要加一到middleware去check请求是否有效，比如header里是否带有tokeny已经token的有效性。另外最好把鉴权模块和业务逻辑分离

Answer 2

我知道，token可以储存在游览器的windows对象中，就算一些没有token或者token过期的用户去访问后台，但是还是没有权限向后端get或post任何请求，因此这些用户能访问这些页面，但看不到页面里面的数据。

但。。。。还有没有更好的办法，让没有token或者token过期的用户连访问都没有不能访问。

建立一个组件，然后在每个页面中引用这个组件。这个组件向服务端发送一个get请求，如果返回的是false，这个组件就会弹窗的形式跳出来，让用户回到登陆的页面重新登陆。如果返回的是true，这个组件就不显示。这个组件的意义就是为了验证用户是否有权限这个访问这个页面。

Answer 3

每个页面都调用一个页面权限查询的接口 这个请求在页面加载时最先执行

Answer 4

可以使用vue-router的beforeEach进行权限验证，每个页面的权限信息可以写到路由的meta中，或者也可以在beforeEach中通过调用后端的接口，异步的去判断页面的权限

Answer 5

举个例子：如果你把token存在localStorage里面的话，在router里面加上

const router = new VueRouter({
  mode: 'history',
  yourRoutes,
});

router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    localStorage.removeItem('token');
  }
  const token = localStorage.getItem('token');
  if (!token && to.path !== '/login') {
    next({ path: '/login' });
  } else {
    next();
  }
});