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

兴弈

路由守卫

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. import store from '../store/index.js'
   
2. 
   
3. 
   
4. // 路由守卫
   
5. router.beforeEach((to, from, next) => {
   
6. 
   
7.   // console.log("store", store.state.uInfo)
   
8.   // 判断是否登录
   
9.   const uInfo = store.state.uInfo.userInfo;
   
10. 
    
11.   if (!uInfo.userName) {
    
12.     if (to.path === '/login') {
    
13.       next();
    
14.       return;
    
15.     }
    
16.     next('/login');
    
17.   }
    
18.   else {
    
19.     next();
    
20.   }
    
21. })

复制代码

登录状态储存

在Vue 3中，可以使用Vue的响应式状态管理功能和浏览器提供的localStorage或sessionStorage API来存储登录状态。

1. //在用户登录后将信息存储在localStorage中
   
2. localStorage.setItem('user', JSON.stringify(user))
   
3. 
   
4. //在用户注销时删除存储的信息
   
5. localStorage.removeItem('user')
   
6. 
   
7. //在应用程序初始化时检查用户是否已登录
   
8. const user = JSON.parse(localStorage.getItem('user'))
   
9. const isAuthenticated = user !== null
   
10. 
    
11. //将登录状态存储在响应式状态中
    
12. import { reactive } from 'vue'
    
13. 
    
14. const state = reactive({
    
15.   isAuthenticated: false
    
16. })
    
17. 
    
18. //在登录时更新状态
    
19. state.isAuthenticated = true
    
20. 
    
21. //在注销时更新状态
    
22. state.isAuthenticated = false

复制代码

在上面的示例中，我们使用localStorage将用户信息存储在本地浏览器中，并使用Vue的响应式状态管理功能来存储登录状态。

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

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

localStorage的用法

在Vue3中，

1. localStorage.setItem

复制代码

用于将数据存储在浏览器的本地存储中。

1. setItem

复制代码

方法用于向本地存储添加键值对。第一个参数是键，第二个参数是值。
以下是如何使用它的示例：

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

复制代码

您可以使用

1. getItem

复制代码

方法检索值：

1. localStorage.getItem('key');

复制代码

1. localStorage.removeItem

复制代码

用于从本地存储中删除指定的键值对。
以下是如何使用它的示例：

1. localStorage.removeItem('key');

复制代码

例子：

1. const login = () => {
   
2. 
   
3.                 store.commit('setUserInfo', data.loginData);
   
4. 
   
5.                 // 设置本地存储数据 localStorage.setItem('key', 'value');
   
6.                 localStorage.setItem('loginData', JSON.stringify(data.loginData))
   
7. 
   
8.                 router.push({
   
9.                     path: '/user',
   
10.                 });
    
11.             }

复制代码

store

1. export default {
   
2. 
   
3.     namespace: true,
   
4. 
   
5.     state: {
   
6.         // localStorage.getItem('key');
   
7.         userInfo: localStorage.getItem('loginData') && JSON.parse(localStorage.getItem('loginData')) || {},
   
8.     },
   
9. 
   
10.     mutations: {
    
11.         setUserInfo(state, uInfo) {
    
12.             state.userInfo = uInfo;
    
13.         }
    
14. 
    
15.     }
    
16. }

复制代码

退出登录时

1.   const loginOut = () => {
   
2.                 localStorage.removeItem('loginData');
   
3.                 store.state.uInfo.userInfo = {};
   
4.                 router.push({
   
5.                     path: '/login',
   
6.                 })
   
7.             }

复制代码

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/3267445h0.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！