vue判断是否登陆

### Vue 中通过 Cookie 实现路由守卫来检查用户登录状态 在 Vue.js 应用程序中，可以通过 `vue-router` 的导航守卫功能结合读取浏览器中的 Cookie 来实现对用户登录状态的校验。以下是具体方法和代码示例： #### 使用第三方库读取 Cookie 为了方便操作 Cookie，在项目中可以引入 `js-cookie` 这一轻量级库。安装方式如下： ```bash npm install js-cookie ``` #### 配置路由守卫 在 Vue 路由配置文件中设置全局前置守卫 (`beforeEach`)，用于拦截每次路由跳转并检查用户的登录状态。 ```javascript import { createRouter, createWebHistory } from 'vue-router'; import Cookies from 'js-cookie'; // 定义路由 const routes = [ { path: '/login', name: 'Login', component: () => import('@/views/Login.vue') }, { path: '/dashboard', name: 'Dashboard', component: () => import('@/views/Dashboard.vue'), meta: { requiresAuth: true } } ]; // 创建路由器实例 const router = createRouter({ history: createWebHistory(), routes }); // 设置全局前置守卫 router.beforeEach((to, from, next) => { const isAuthenticated = !!Cookies.get('auth_cookie'); // 判断是否存在名为 auth_cookie 的 cookie[^1] if (to.matched.some(record => record.meta.requiresAuth)) { if (!isAuthenticated) { next({ name: 'Login' }); // 如果未登录，则重定向至登录页面 } else { next(); // 已登录则继续访问目标路径 } } else { next(); } }); export default router; ``` 上述代码实现了以下逻辑： - 当用户尝试进入需要认证的路由（即设置了 `meta.requiresAuth: true` 属性的路由）时，会自动检查是否有指定名称的 Cookie 存在。 - 若不存在该 Cookie 或其值为空字符串，则认为用户未登录，并将其重定向到登录页；反之允许正常访问受保护资源。 #### 登录成功后存储 Cookie 当用户完成身份验证流程之后，服务器通常会在响应头中返回 Set-Cookie 字段以告知客户端保存新的 session 数据或者 token 值作为后续请求的身份标识符之一。此时无需手动调用任何额外 API 即可完成持久化过程。 如果前端也需要主动参与管理这些数据的话，则可以在接收到成功的 HTTP 回应包体的同时借助 Js-cookie 提供的方法显式设定对应键名下的新值: ```javascript function handleLoginSuccess(responseData){ let expirationDate=new Date(new Date().getTime()+responseData.expiresIn*1000); Cookies.set('auth_cookie', responseData.token,{ expires:expirationDate, secure:true,//仅限 HTTPS 下发送给服务端 sameSite:'strict' }); } ``` 以上就是基于 Vue 和 Cookie 实现简单有效的用户权限控制机制的过程概述以及部分核心片段展示。