nuxt 路由拦截

A_Ghost

1,配置

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');
    }
  }
}

参考:
nuxt中的process.static/process.server/process.client

阅读 1.1k

知道的越多,不知道的也就越多。

18 声望
3 粉丝
0 条评论

知道的越多,不知道的也就越多。

18 声望
3 粉丝
文章目录
宣传栏