详解nuxt路由鉴权(express模板)
这里我们以用户登录鉴权为例
express依赖express-session中间件实现session功能
若我们不加载express-session组件
router.get('/user/login',function(req,res){ console.log(req,req.session) })
会发现不存在session对象
引入express-session组件
//server/index.js文件 ... importsessionfrom'express-session' ... app.use(session) ...
然后再试试
router.get('/user/login',function(req,res){ console.log(req.session) })
这时可以看到打印出空数组对象。。。好了,下面就可以使用了
import{Router}from'express' constrouter=Router() importrequestfrom'superagent' router.get('/user/login',function(req,res){ request .get(path) .query(req.query) .set('Content-Type','application/json;charset=UTF-8') .end((err,_res)=>{ if(_res.body.code===200){ req.session.authUser=_res.body.data//将返回的用户数据存到session } res.json(_res.body) }) }
seeesion搞定了,怎么进行鉴权呢?
首先,将用户session保存到store,以便全局取用
nuxtServerInit方法:如果在状态树中指定了nuxtServerInit方法,Nuxt.js调用它的时候会将页面的上下文对象作为第2个参数传给它(服务端调用时才会酱紫哟)。当我们想将服务端的一些数据传到客户端时,这个方法是灰常好用的。
举个例子,假设我们服务端的会话状态树里可以通过req.session.user来访问当前登录的用户。将该登录用户信息传给客户端的状态树,我们只需更新store/index.js如下:
actions:{ nuxtServerInit({commit},{req}){ if(req.session.user){ commit('user',req.session.user) } } }
这样我们就可以通过判断store中user的状态来知道用户是否登录。
在跳转时需要鉴权的页面添加中间件:
exportdefault{ middleware:auth }
auth.js
exportdefaultfunction({store,redirect}){ if(!store.state.authUser){ returnredirect('/user/login') } }
大概流程:a–>bmiddleware鉴权未登录,跳转登录页面登录,调用登录接口保存用户session,返回a,再次跳转b,nuxtServerInit从上下文对象中获取session保存在store,鉴权成功,跳转成功。
拓展:connect-redis
sever/index配置
importexpressfrom'express' import{ Nuxt, Builder }from'nuxt' importsessionfrom'express-session' importredisfrom'connect-redis' importbodyParserfrom'body-parser' importapifrom'./api' importserverConfigfrom'./config'//redis配置文件 constapp=express() consthost=process.env.HOST||'127.0.0.1' constport=process.env.PORT||3000 constRedisStore=redis(session) app.use(bodyParser.json()) app.use('/static',express.static('static')) app.use(session({ name:'sid', secret:'Asecret123-', resave:true, rolling:true, saveUninitialized:false, store:newRedisStore(serverConfig) })) app.set('port',port) //ImportAPIRoutes app.use('/api',api) app.use('/',api) //ImportandSetNuxt.jsoptions letconfig=require('../nuxt.config.js') config.dev=!(process.env.NODE_ENV==='production') //InitNuxt.js constnuxt=newNuxt(config) //Buildonlyindevmode if(config.dev){ constbuilder=newBuilder(nuxt) builder.build() } //Givenuxtmiddlewaretoexpress app.use(nuxt.render) //Listentheserver app.listen(port,host) console.log('Serverlisteningon'+host+':'+port)//eslint-disable-lineno-console
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。