当前位置：首页 > news >正文

15前端项目----用户信息/导航守卫

news 来源：原创 2025/5/9 13:21:37

登录/注册

- 持久存储用户信息
- - 问题
- 退出登录
- 导航守卫
- 解决问题

持久存储用户信息

本地存储：（在actions中请求成功时）
添加localStorage.setItem('token',result.data.token);
获取存储：（在user仓库中，state中token初始值设为localStorage.getItem('token')）

首先当本地存储没有值为null,仓库中token初始值也为null
一旦登录派发action,那么本地存储就会有值，而此时仓库的token也是有相同值
那么当一刷新，仓库数据token会首先找到本地存储的token值作为初始值

问题

跳转到其他组件search时，Header又变成未登录状态

原因：
因为只是在home组件中派发了action,search组件并未派发，那么就获取不到用户信息
解决：

在所有组件添加上？不够好。
放在App组件只执行一次？不行，
app一挂载就执行派发任务，但是还没登录呢，自然是获取不到的，可是即便是登陆完了也是获取不到，app早就挂载完了。只能第二次打开页面才会呈现已登录状态。

用户登录完，还能再次进入login路由组件进行登录吗？不应该

退出登录

业务
1. 需要发请求，通知服务器退出登录【清除token数据】
2. 清除项目用到的数据【userInfo,token】

api+vuex

//actions
async userLogout({ commit },) {//向服务器发送一次请求，清除服务器的tokenlet result = await reqLogout();if (result.code == 200) {//清除state数据---提交给mutaions//注意：actions里面不能处理statecommit('CLEAR');return 'ok';}else{return Promise.reject(new Error('fail'));}}//mutaions
CLAER(state){state.token = '';state.userInfo = {};//清除本地存储tokenlocalStorage.removeItem('token');
}

派发action
退出登录绑定@click="logout"

//method
async logout(){try{await this.$store.dispatch('userLogout');//跳转到首页this.$router.push('/home');}catch(error){alert(error.message);}
}

问题如果在search组件页面中点击退出登录，路由应该跳转到首页。所有actions中需要返回成功与失败结果，判断是否跳转

导航守卫

导航守卫：
是 Vue Router 提供的一种机制，主要用于在路由导航过程中进行控制和管理。它允许你在路由发生变化时执行一些操作，如权限验证、数据预加载、页面访问控制等。
导航守卫的三种类型：
1. 全局守卫:只要路由发生变化，守卫就能监听到并且拦截住
(1) router.beforeEach - 全局前置守卫
(2) router.beforeResolve - 全局解析守卫
(3) router.afterEach - 全局后置钩子
2. 路由独享守卫
3. 组件内守卫
全局守卫 router.beforeEach((to,from,next)=>{}):
- to:跳转的目的路由信息(如下图
- from:当前路由信息（从哪个路由跳转的）
- next:放行函数
  - next():直接放行
  - next(‘/login’):放行到指定路由
  - next(false)

解决问题

用户登录了，不能在进入login
路由跳转其他页面同样需要用户信息展示

判断仓库中是否拿到token，如果有则说明登录了

在router配置中

//引入store
import store from '@/store';
const router = new VueRouter({……});//全局路由守卫
router.beforeEach(async (from,to,next)=>{let token = store.user.token;if(token){//登录成功//判断如果to是login则不允许放行，register也同样不允许if(to.path=='/login' || to.path=='/register'){//停留在home首页next('/home');}else{//登录成功，但跳转的不是login//【home\search\detail……】//这里可以派发actions,获取用户信息//判断有没有获取用户信息if(name){//已经有用户信息了next();}else{//没有try{await store.dispatch('getUserInfo');next();}catch(error){alert(error.message);//token无效，跳到登录页再次登录//发送请求userLogout清除服务器token（清除用户信息和本地存储token的业务mutaions也一并完成了）await store.dispatch('userLogout');next('/login');}}}}else{//未登录后期再解决，还需开发别的页面next();}
})