详解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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。