nuxt 路由拦截 nuxt.jsrouter

1，配置
【nuxt 路由拦截】1.1，在plugin 下创建 userAuth文件

export default (context) => { if(process.client){ const token = sessionStorage.getItem('token'); context.app.router.beforeEach( (to, from, next) => { if( !token && to.path !== '/login' ){ next('/login'); }else if(to.path !== '/login'){ next(); }else { next(); } }) } };

注意
1）路由当前路径和跳转路径不要重复，不然会出现死循环，超出堆栈问题。
Maximum call stack size exceeded。
2）莫名其妙出现的如下报错，但是清理缓存之后就消失了。
[SSE] Connecting to /_loading/sse...
3）process.client 是判断当前是处于服务端，还是客户端。
因为，sessionStorage 是window 对象，在服务端获取不到。
2，调用
在nuxt.config.js中调用

plugins: [ '@/plugins/userAuth' ],

另外：使用中间件进行路由拦截
使用中间件会有一个问题，直接如输入目标地址，例如：https://192.1.1.1/home
会成功进入，只有跳转到别的地址的时候，才会拦截，跳转登录页。
所以，并不推荐使用

export default function ({ route, redirect }) { if (process.client) { const token = sessionStorage.getItem('token'); if (!token && route.path !== '/login') { redirect('/login'); } } }