Vue3的路由守卫以及登录状态储存过程

import store from '../store/index.js'


// 路由守卫
router.beforeEach((to, from, next) => {

  // console.log("store", store.state.uInfo)
  // 判断是否登录
  const uInfo = store.state.uInfo.userInfo;

  if (!uInfo.userName) {
    if (to.path === '/login') {
      next();
      return;
    }
    next('/login');
  }
  else {
    next();
  }
})

//在用户登录后将信息存储在localStorage中
localStorage.setItem('user', JSON.stringify(user))

//在用户注销时删除存储的信息
localStorage.removeItem('user')

//在应用程序初始化时检查用户是否已登录
const user = JSON.parse(localStorage.getItem('user'))
const isAuthenticated = user !== null

//将登录状态存储在响应式状态中
import { reactive } from 'vue'

const state = reactive({
  isAuthenticated: false
})

//在登录时更新状态
state.isAuthenticated = true

//在注销时更新状态
state.isAuthenticated = false

localStorage.setItem('key', 'value');

localStorage.getItem('key');

localStorage.removeItem('key');

const login = () => {

                store.commit('setUserInfo', data.loginData);

                // 设置本地存储数据 localStorage.setItem('key', 'value');
                localStorage.setItem('loginData', JSON.stringify(data.loginData))

                router.push({
                    path: '/user',
                });
            }

export default {

    namespace: true,

    state: {
        // localStorage.getItem('key');
        userInfo: localStorage.getItem('loginData') && JSON.parse(localStorage.getItem('loginData')) || {},
    },

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

    }
}

  const loginOut = () => {
                localStorage.removeItem('loginData');
                store.state.uInfo.userInfo = {};
                router.push({
                    path: '/login',
                })
            }