Vue将数据存放在会话存储中

 前言:

会话存储(session Storage):当浏览器被关闭的时候,存在session中的数据就会消失。

本地存储(local Storage):在本地存储的数据会永远保留,除非你自己删除,要不然一直在。

1、设置

// 数据监听属性
watch: {
// 将添加的数据存放到session中
    tableList() {
        sessionStorage.setItem('tableList', JSON.stringify(this.tableList))
    }
},

 2、获取

<script>
    new Vue({
        el:'#app',
        data:{
           // 再从浏览器中获取刚在存储的数据,如果没有数据就空数组占用
           tableList:JSON.parse(sessionStorage.getItem('tableList') || '[]'),
        }
    })
</script>

### Vue3 使用 Pinia 存储用户登录后的权限实现方式 在 Vue3 中使用 Pinia 进行状态管理时,可以有效地处理用户的登录状态以及相关的权限数据。以下是具体的实现方法: #### 1. 配置 Pinia Store 创建一个用于存储用户信息(包括 token 和权限)的 Pinia store 文件 `stores/auth.js` 或者类似的命名。 ```javascript // stores/auth.js import { defineStore } from 'pinia'; export const useAuthStore = defineStore('auth', { state: () => ({ token: localStorage.getItem('token') || null, // 初始化时从 localstorage 获取 token userPermissions: [], // 用户权限列表 isLoggedIn: false, }), actions: { setToken(token) { this.token = token; localStorage.setItem('token', token); // 同步到本地存储 }, clearToken() { this.token = null; localStorage.removeItem('token'); // 清除本地存储中的 token }, setUserPermissions(permissions) { this.userPermissions = permissions; // 设置用户权限 }, loginSuccess(data) { this.setToken(data.token); this.setUserPermissions(data.permissions); // 假设后端返回了权限数据 this.isLoggedIn = true; }, logout() { this.clearToken(); this.userPermissions = []; this.isLoggedIn = false; } }, }); ``` 此部分实现了通过 Pinia 的 `state` 属性来维护当前用户的登录状态、token 及其权限,并提供了相应的操作函数[^1]。 #### 2. 路由拦截器设置 为了确保只有具有适当权限的用户才能访问某些页面,在路由中加入拦截器是非常必要的。 ```javascript // router/index.ts import { createRouter, createWebHistory } from 'vue-router'; import { useAuthStore } from '@/stores/auth'; const routes = [ // 定义你的路由... ]; const router = createRouter({ history: createWebHistory(), routes, }); router.beforeEach(async (to, from, next) => { const authStore = useAuthStore(); if (to.meta.requiresAuth && !authStore.isLoggedIn) { return '/login'; // 如果目标页面需要授权而未登录,则重定向至登录页 } if (to.meta.requiredPermission) { let hasPermission = false; to.meta.requiredPermission.forEach(permissionKey => { if (authStore.userPermissions.includes(permissionKey)) { hasPermission = true; } }); if (!hasPermission) { alert("您没有足够的权限查看该页面"); return '/'; } } next(); // 继续导航流程 }); export default router; ``` 上述代码片段展示了如何利用 Pinia 中的状态来进行路由守卫检查,从而保护受控资源不被非法访问。 #### 3. 主入口初始化 最后一步是在应用启动的时候引入并安装这些组件和服务。 ```javascript // main.ts import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; import { useAuthStore } from './stores/auth'; const app = createApp(App); app.use(router).mount('#app'); useAuthStore().isLoggedIn = !!localStorage.getItem('token'); // 判断是否有已存在的 token 并更新登陆状态 ``` 这里完成了整个项目的组装工作,使得每次加载应用程序都能自动恢复上一次会话的信息^。 #### 关于 Token 生命周期管理 需要注意的是,尽管可以通过 Pinia 来临时保存 token 数据以便快速获取,但由于 Pinia 是基于内存的设计模式,所以在页面刷新之后所有的状态都会丢失。因此建议始终同步一份副本存放在更持久的地方比如 LocalStorage 或 SessionStorage 中[^3]^。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值