关于登录拦截？

Question

我看老师的免费课程中是通过接口来拦截的【这种做法算不算是前端拦截，通过请求接口，前端做组件选择渲染】，每次请求接口之前先判断是否登录。而nuxt课程中压根就没看懂。

我通过vue脚手架生成的项目，想做登录拦截，express路由过滤是如下写的

//登录拦截
app.use(function (req,res,next) {
    if(req.session.manager){
        next();
    }else{
        if (req.originalUrl === '/') {
            next()
        } else {
            res.json({
                errno:1024,
                hint:'请先登录！',
            });
        }
    }
});

可是这样写发现，所有的组件都不能渲染了，页面就是一个空白，是不是把前端的路由也给拦截了，应该用什么样的方式做登录拦截啊，希望老师有些许空闲时间帮忙解决一下，感激！！！

Answer 1

Scott 2017-09-25 11:35:34

这个用 redirect 试试，或者直接返回一个 render 的 login 页面，如果是返回一个 json 的话，肯定是空白页面，除非你在 Vue 的入口文件中也集成了中间件，判断返回的 json 是不是 error 是 1024，如果是，那么从前端控制，修正 window.location.href 到 login 页面也行，这样混合写在一个 middleware 中，有点问题。

要么就考虑用 koa 的吧，跟课程保持一致，其实原理跟这里是一样的

app.use(function (req,res,next) {
  if (req.session.manager){
    next()
  } else {
    if (req.originalUrl === '/') {
      next()
    } else {
      // 这里可以直接 redirect 到 login 页面或者 render login 页面
      return res.redirect('/login')
      // return res.render('./xx/login', {/* 一些信息 */})
      // res.json({
      //  error: 1024,
      //  hint: '请先登录！'
      // })
    }
  }
})

Answer 2

Scott 2017-09-25 11:21:20

这个还是后端路由拦截啊，感觉有点怪怪的这块代码，在 app.use 里面，先把其他的判断注释掉，打印下 res.session，然后直接 next() 看看会不会空白了，这样排查下是哪里的代码停滞了整个流程

• 提问者 拖车板牙爵士 #1

  注释掉其他代码直接nuxt之后，页面是可以正常显示的，我这个中间件的目的就是在请求其他路由之前，先判断下有没有session，有的话就可以访问，没有就不能访问，而那个if里的就是忽略过滤的白名单，这知道这样可行么，应该有什么其他办法么？既可以避免每一个接口调用前，调用另一个判断登录的接口，又可以实现登录拦截！