精华内容
下载资源
问答
  • 2022-06-09 16:16:19
    // 全局路由守卫
    router.beforeEach((to, from, next) => {
     // next()
     let token = localStorage.getItem('token');
     console.log(token)
     //  // console.log(userName)
      if (to.path === "/login") {
        // 如果是访问登录界面,如果用户会话信息存在,代表已登录过,跳转到主页
        if (token!=null) {
          next({
            path: "/"
          });
        } else {
          next();
        }
      } else {
        if (token==null) {
          // 如果访问非登录界面,且户会话信息不存在,代表未登录,则跳转到登录界面
          next({
            path: "/login"
          });
        } else {
          next();
        }
      }
    });

    更多相关内容
  • vue 全局路由守卫

    2022-06-15 10:49:16
    //注册全局守卫,作用是路由跳转前对路由进行判断,防止未登陆的用户跳转到其他页面去

    vue 项目中经常用到全局守卫,判断是否有token,页面白名单等功能开发,

    //注册全局守卫,作用是路由跳转前对路由进行判断,防止未登陆的用户跳转到其他页面去

    import NProgress from 'nprogress' // 进度条
    import 'nprogress/nprogress.css'
    import store from '@/store'
    // 在守卫中引入token
    import { getQueryString } from '@/utils'
    import { getToken, setToken } from '@/utils/auth'
    // import { setToken, getToken } from '@/utils/auth'
    // 路由白名单
    const whiteList = [
      '/login'
      // '/home',
      // '/toLogin',
    
    ] // no redirect whitelist
    
    export default router => {
      // 导航守卫,首先获取token,如果有token则判断路由是不是==login,如果在则放行,如果!==login,看看判断Vuex获取用户信息id,如果id为空则获取用户信息,如果id不为空则直接放行,
      // 如果没有token,则判断该路由是不是在白名单内,如果不在则回登录页面。如果在白名单内则直接放行。
      router.beforeEach((to, from, next) => {
        // 显示进度条
        NProgress.start()
        // console.log('路由跳转打印:', to.path)
        // 获取token
        const hasToken = getToken()
    
        const tempToken = getQueryString('token')
        console.log(tempToken)
    
        if (to.path === '/home/detail' && tempToken && tempToken.length > 0) {
        
          setToken(tempToken)
          store.dispatch('getInfo').then(() => {
            next()
          })
        } else if (hasToken) {
          // debugger
          // console.log(to.path)
          // 如果在登录页
          if (to.path === '/login') {
            next({ path: '/' })
            // 进度条完成
            NProgress.done()
          } else {
            // 如果不在登录页,判断vueX中的用户id是否为空
         
            if (store.getters.id === null) {
              const data1 = JSON.parse(localStorage.getItem('data'))
    
              if (data1) {
                store.commit('SET_TOKEN', data1.token)
                store.commit('SET_MOBILE', data1.mobile)
                store.commit('SET_USER_NAME', data1.nickname)
                store.commit('SET_JOBNUMBER', data1.jobNumber)
                store.commit('SET_ID', data1.id)
                store.commit('SET_AVATAR', JSON.parse(sessionStorage.getItem('avatar')))
              }
              // console.log(data1)
              // 如果为空则
              // debugger
              // await store.dispatch('getInfo')
              // next({ …to, replace: true })中的replace: true只是一个设置信息,告诉VUE本次操作后,不能通过浏览器后退按钮,返回前一个路由。
              // 因此next({ …to, replace: true })可以写成next({ …to }),不过你应该不希望用户在addRoutes()还没有完成的时候,可以点击浏览器回退按钮搞事情吧。
              // next({ ...to, replace: true })
              // next({ path: '/' })
              next()
            } else {
              // 如果不为空则放行
              next()
            }
          }
        } else {
          /* has no token*/
          if (whiteList.indexOf(to.path) !== -1) {
            // 如果在白名单内则直接放
            // in the free login whitelist, go directly
            next()
          } else {
            // 没有token,也不在白名单内则回登录页面
            // console.log(3)
            next(`/login?redirect=${to.path}`)
            // next(`/login`)
            // next()
            NProgress.done()
          }
        }
      })
      router.afterEach((to, from) => {
        NProgress.done()
      })
    }
    

    展开全文
  • Vue 全局路由守卫

    2021-11-19 10:13:03
    mate配置项专门用于给...全局路由守卫(责任相当于门卫,用来判断可以放行哪些)分为前置路由守卫和后置路由守卫(责任相当于服务员,已经放人进来,做一些服务工作) 给一个route配置守卫:beforeEnter ...

    mate配置项专门用于给程序员写一些元数据。比如设置一个布尔值isAuth ,用于判断是否需要鉴定权限。设置一个title用于给每个route展示一个页面的title

    全局路由守卫(责任相当于门卫,用来判断可以放行哪些)分为前置路由守卫和后置路由守卫(责任相当于服务员,已经放人进来,做一些服务工作)

    给一个route配置守卫:beforeEnter 

     

     

    用来代替组件的actived和deactived(组件的加载和销毁)

    展开全文
  • Vue全局路由守卫验证登录状态

    全局路由守卫使用

    今天开发的时候,需要在跳转路由的时候,验证一下登录状态。就是在跳转路由的时候判断一下,本地缓存是否存在token。如果没有,需要用户重新登录。特此记录一下。

    在main.js里面插入一下代码:

    // 路由守卫
    
    // to:即将要进入的目标 路由对象
    // from:当前导航正要离开的路由
    //next:放行
    router.beforeEach((to, from, next) => {
        if (to.matched.length != 0) {
            if (to.meta.requireAuth) { // 判断该路由是否需要登录权限
                if (Boolean(localStorage.getItem("token"))) { // 通过浏览器本地缓存判断当前的token是否存在
                    next();
                } else {
                    next({
                        path: '/login',
                        query: { redirect: to.fullPath } // 将跳转的路由path作为参数,登录成功后跳转到该路由
                    })
                }
            } else {
                if (Boolean(localStorage.getItem("token"))) { // 判断是否登录
                    if (to.path != "/" && to.path != "/login") { //判断是否要跳到登录界面
                        next();
                    } else {
                        /**
                         * 防刷新,如果登录,修改路由跳转到登录页面,修改路由为登录后的首页
                         */
                        next({
                            path: '/index'
                        })
                    }
                } else {
                    next();
                }
            }
        } else {
            next({
                path: '/login',
                query: { redirect: to.fullPath } // 将跳转的路由path作为参数,登录成功后跳转到该路由
            })
        }
    })

    在登录的时候保存token

    代码:

     login(){
                    localStorage.setItem('token','fdfjkdfjksdfdkf');
                    this.$router.push('/index')
                }

    以上就是全局路由守卫验证登录状态的基本使用。

    展开全文
  • vue全局路由守卫

    2020-02-12 22:18:30
  • 全局前置路由守卫 在路由跳转之前,我们可以对路由进行权限限制,它会传递一个回调函数,里面有三个参数 // to: 目标路由 // from: 当前路由 // next() 跳转 router.beforeEach((to, from, next) => { ...
  • vue路由全局守卫

    2022-06-04 21:08:08
    Vue路由全局守卫的用法和使用场景加解析,非常清楚
  • 分类一、全局路由守卫1. 作用2. 基本代码3. 实例:路由守卫的拦截二、独享路由守卫1. 作用2. 实例:独享守卫的拦截三、组件内路由守卫1. 两个守卫2. 基本语法3. 实例:组件内的守卫 路由守卫 1. 分类 全局守卫 ...
  • 使用路由守卫beforeEach,可以实现路由侦听; 实现代码: this.$router.beforeEach((to, from, next) => { console.log('111111113',to,from); next(); }); to 是跳转路由之后的page对象,里面包含路径 ...
  • vue全局守卫
  • 1.全局路由守卫 const Foo = { template: ..., beforeRouteEnter(to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不能!获取组件实例 this // 因为当守卫执行前,组件实例还没被创建 }, ...
  • VUE全局路由守卫

    2020-09-06 21:36:47
    VUE全局路由守卫 重点!!! 大项目都会采用,因为需要验证用户是否登录等问题 是什么 在使用vue-router时会进行router跳转,跳转时,我们能对路由进行暂时拦截,进行一系列条件判断(比如用户登录情况,是不是vip...
  • router.js:全局守卫 import { createRouter, createWebHashHistory } from 'vue-router' // 省略了routes 中的路由规则 const routes = [ ... ... ] const router = createRouter({ history: ...
  • vue中路由守卫一共有三种,一个全局路由守卫,一个是组件内路由守卫,一个是router独享守卫 所谓的路由守卫可以简单的理解为一座房子的门口的保安,想要进入这个房子就必须通过保安的检查,要告诉路由守卫你从哪里...
  • Vue路由全局守卫

    千次阅读 2019-12-15 13:57:42
    一、路由守卫 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求。对此,vue-route 提供的beforeRouteUpdate 可以方便地实现导航守卫(navigation-guards)。---- 导航守卫文档地址 二、全局前置守卫...
  • vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach,他们会在路由即将改变前和改变后进行触发。所以判断用户是否登录需要在beforeEach导航钩子中进行判断。 导航钩子有3个参数:1...
  • VueRouter【全局路由守卫,路由独享,组件内的守卫】
  • 全局后置守卫:初始化时执行、每次路由切换后执行
  • 全局前置路由守卫,确保哪些需要权限才可以被访问
  • 简单的登录退出页面 路由全局安全守卫举例 主要是在router.js路由节点文件和login.vue登录文件里进行一系列的操作。 index.js 配置路由 // 配置的路由节点 import Home from '../views/Home' import Login from '.....
  • vue路由守卫

    2022-03-11 15:13:16
    vue路由守卫
  • 全局路由守卫this.$vux.loading.hide()报错,访问不到this 解决办法 申明变量代替this main.js文件方法 router.beforeEach((to, from, next) => { if(vue){ vue.$vux.loading.hide() }else{ } next() }) let ...
  • vue路由守卫有哪些 全局前置守卫 router.beforeEach const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 每个守卫方法接收三个参数: to: Route: 即将要进入的...
  • Vue】通过“全局路由守卫”实现路由组件”切换“时的”权限控制
  • 局部守卫 在指定的vue文件中用beforeRouteEnter 函数if通过则next()通过else则不通过 <script> export default { ... // 局部路由守卫 beforeRouteEnter (to,from,next) { var x = 1; if(x ===

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,696
精华内容 3,478
关键字:

vue全局路由守卫

友情链接: model2-5.ra.zip