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

路由守卫

vue 3使用vue router 4来进行路由管理和导航控制。vue router提供了一些钩子函数来实现路由守卫。

路由守卫是一些特殊的函数，它们会在路由发生变化时被调用，可以用来进行一些操作，例如权限验证、登录状态检查、页面跳转等。

在vue router 4中，路由守卫可以分为三种类型：全局守卫、路由独享守卫和组件内守卫。

全局守卫

全局守卫会在所有路由跳转时被调用，可以用来进行一些全局性的操作，例如权限验证和路由跳转统计。全局守卫有三种类型：

beforeeach(to, from, next): 在路由跳转前被调用，可以进行一些预处理操作，例如权限验证、路由跳转拦截等。如果要继续路由跳转，需要调用next()函数。
aftereach(to, from): 在路由跳转完成后被调用，可以进行一些后处理操作，例如页面跳转统计、日志记录等。
beforeresolve(to, from, next): 在路由解析完毕后被调用，用于异步路由加载时等待所有相关组件都解析完毕。如果要继续路由跳转，需要调用next()函数。

以beforeeach为例（router.js)

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

登录状态储存

在vue 3中，可以使用vue的响应式状态管理功能和浏览器提供的localstorage或sessionstorage api来存储登录状态。

//在用户登录后将信息存储在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将用户信息存储在本地浏览器中，并使用vue的响应式状态管理功能来存储登录状态。

当用户登录时，我们将其信息存储在localstorage中，并将响应式状态中的isauthenticated属性设置为true。
当用户注销时，我们删除存储在localstorage中的信息，并将isauthenticated属性设置为false。

在应用程序初始化时，我们检查localstorage中是否存在用户信息，如果存在，则将isauthenticated属性设置为true。

localstorage的用法

在vue3中，localstorage.setitem用于将数据存储在浏览器的本地存储中。

setitem方法用于向本地存储添加键值对。第一个参数是键，第二个参数是值。

以下是如何使用它的示例：

localstorage.setitem('key', 'value');

您可以使用getitem方法检索值：

localstorage.getitem('key');

localstorage.removeitem用于从本地存储中删除指定的键值对。

以下是如何使用它的示例：

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

store

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