nuxt 路由鉴权
由于nuxt无法配置路由信息，所以我们常用的配置路由meta信息的路子就走不通了。
nuxt官方也有对应的解决方案，大概流程如下：
- 创建一个路由中间件auth，用于判断
- 在对应的页面使用对应的路由中间件auth
- 当用户进入该页面时，auth进行判断：重定向还是报错
那么中间件怎么写就需要了解一下了。
有token才允许进入页面
在middleware目录创建一个auth.js文件
auth.js：
export default function ({ store, error }) {
if (!store.state.user.token) {
error({
message: "当前未登陆，无法访问该页面！",
statusCode: 403
})
}
}
解构得到两个对象，store和error，判断 store中是否存在token，如果没有，通过error对象报错。
无token才允许进入的页面
无token能进，如果有token，我们就重定向到首页index
在middleware目录创建一个guest.js文件
guest.js：
export default function ({ store, redirect }) {
if (store.state.user.token) {
redirect({ name: "index", })
}
}这样我们应对两种状态鉴权中间件就做好了，下面就是使用。
登录页
在login页中我们要求没有登陆才允许进入，那么就是使用guest.js
在login.vue文件中指定中间件
<script>
export default {
middleware: "guest",
}
</script>这样就行了。
如果是其他需要登陆的页面，就使用auth。
版权申明
本文系作者 @木灵鱼儿 原创发布在木灵鱼儿站点。未经许可，禁止转载。
全部评论 2
tog
Google Chrome Windows 10木灵鱼儿
FireFox Windows 10