今天在做nuxt项目时遇到一个很郁闷的问题,在做权限控制时需要注册一个router的全局导航beforeEach,简单讲一下步骤:
1.在nuxt的plugins目录中编写插件
// plugins/route.js
export default ({app})=>{
var token = app.store.getters.genToken
// 判断是否有token,若有则可以访问否则跳转到/login
app.router.beforeEach((to,from,next)=>{
if(to.fullPath == '/login'){
next()
}else{
if(!!token){
next()
}else{
next('/login')
}
}
})
}
2.在nuxt.config.js中加入注册插件
// nuxt.config.js
plugins: [
'@/plugins/element-ui',
'~/plugins/axios.config.js',
'~/plugins/route.js'
],
逻辑很简单,从vuex中获取token,如果有访问的是/login 那么放行,如果访问其他页面判断有没有token,若果有则放行,否则跳转到/login页面。
运行代码后,直接访问/login没有问题可以看到页面,但是当没有token并且访问受限页面(除了./login之外的其他页面),就会出现This page could not be found错误(控制台没有报错),此时应该会跳转到/login页面(调用了next('/login'))但是却报该页面没找到问题。此问题一般是因为url没有对应的组件造成的。在nuxt中会根据pages文件目录自动帮我们注册路由,所以只要pages中含有login.vue应该来说不会报这个错。到最后也没有弄清楚为什么会这样(知道的大神可以联系我,qq:291225153,万分感激,ps:试过全局解析守卫也不行)。
正所谓活程序员不能被bug憋死,只能寻求其他的解决办法,解决的思路是既然next('/login')不能帮我们跳转。我们就“放行”受限页面(将next('/login')改为next()),但是在放行之后,我们手动让你跳转到login页面(哈哈,我们真坏),终极代码如下
终极代码
export default ({app})=>{
var token = app.store.getters.genToken
// 判断是否有token,若有则可以访问否则跳转到/login
app.router.beforeEach((to,from,next)=>{
if(to.fullPath == '/login'){
next()
}else{
if(!!token){
next()
}else{
next()
app.router.replace('/login')
}
}
})
}
可以看到,我们对于没有权限的路由访问选择了“放行”,当他调用完next执行完所有的钩子后,我们手动将他访问login页面,虽然代码看起来很揪心,不优雅但是确实解决了这个问题。(适当的放下自己心里的疙瘩吧,如果你也像我一样无法解决这个问题,那就只能忍受代码的不优雅了,当然我还是希望你能解决然后告诉我原因,嘻嘻)
希望这篇文章能够给您带来帮助,如果文章中出现错误或问题,希望不吝斧正。