三亚做网站的公司山东关键词网络推广

持久存储用户信息

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

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

问题

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

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

• 解决：

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

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

退出登录

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

1. 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');
}

2. 派发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)

解决问题

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

判断仓库中是否拿到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();}
})

① 路由守卫关注有没有token(有没有登录)，有没有获取信息（派发getUserInfo)
② 请求不到用户信息，说明token无效(过期了)，则清除token,跳到登录页，重新登录
③ 没有token，一定没有用户信息；有用户信息则放行所有