路由守卫（登录_vue3）

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

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

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

效果：

// 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
    }
  }
}

路由守卫（登录_vue3）

猜你喜欢