路由守卫
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)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | 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来存储登录状态。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | //在用户登录后将信息存储在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方法用于向本地存储添加键值对。第一个参数是键，第二个参数是值。
以下是如何使用它的示例：
1 | localStorage.setItem('key', 'value'); |
您可以使用getItem方法检索值：
1 | localStorage.getItem('key'); |
localStorage.removeItem用于从本地存储中删除指定的键值对。
以下是如何使用它的示例：
1 | localStorage.removeItem('key'); |
例子：
1 2 3 4 5 6 7 8 9 10 11 | const login = () => { store.commit('setUserInfo', data.loginData); // 设置本地存储数据 localStorage.setItem('key', 'value'); localStorage.setItem('loginData', JSON.stringify(data.loginData)) router.push({ path: '/user', }); } |
store
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | export default { namespace: true, state: { // localStorage.getItem('key'); userInfo: localStorage.getItem('loginData') && JSON.parse(localStorage.getItem('loginData')) || {}, }, mutations: { setUserInfo(state, uInfo) { state.userInfo = uInfo; } }} |
退出登录时
1 2 3 4 5 6 7 | const loginOut = () => { localStorage.removeItem('loginData'); store.state.uInfo.userInfo = {}; router.push({ path: '/login', }) } |
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持IT俱乐部。
