路由守卫(登录_vue3)

路由守卫就是路由跳转过程中的一些钩子函数 ,在路由跳转的时候,做一些判断或其它的操作。 类似于组件生命周期钩子函数 。

可以监控所有的路由跳转,并做一些相应的操作

实现功能: 不管你在哪个页面,只要没有登陆,就自动跳转到登陆页面

效果:

路由守卫(登录_vue3)_第1张图片

// router/index

//路由守卫
import store from '../store/index.js'

router.beforeEach((to,from,next)=>{
  // to: 从哪个页面
  // from: 到哪个页面
  // next: 只有执行next()页面

  //判断用户是否登录
  console.log('store',store.state.userinfo)
  if(!store.state.userinfo.userInfo.userName){
    // 未登录,跳转到login页面
    if( to.path === '/Login'){
      next()
      return
    }
    next('/Login')
  }else{
    // 已登录
    next()
  }
})



// router/state/userinfo

export default {
    state:{
        userInfo:{}
    },
    mutations: {
    setUserInfo(state,uInfo){
          state.userInfo = uInfo
    }
  }
}



// Login 登陆页面

import { useRouter } from 'vue-router'
const router = useRouter()

    const handleLogin=()=>{
        store.commit('setUserInfo',data.loginData)
        //跳转到  /index  页面
        router.push({
            path:'/index'
        })
    }



操作之后发现可以登录并且跳转到 /index 页面。但是页面刷新之后,state 会清空,这时我们将登陆状态存储到 localStorage 中,这样即使页面刷新,也能保持登陆状态


// 在Login页面   将用户名和密码存储到localStorage中

    const handleLogin=()=>{
        store.commit('setUserInfo',data.loginData)
        localStorage.setItem('loginData',JSON.stringify(data.loginData))
        //跳转到  /index  页面
        router.push({
            path:'/index'
        })
    }


// store/state/userinfo    在store页面  userInfo 解析localStorage 中存储的用户名和密码

export default {
    state:{
        userInfo: (localStorage.getItem('loginData')&&JSON.parse(localStorage.getItem('loginData')))||{}
    },
    mutations: {
    setUserInfo(state,uInfo){
          state.userInfo = uInfo
    }
  }
}

你可能感兴趣的:(笔记,前端,javascript,网络)