做网站用小型机或服务器做网络推广一般是什么专业
登录/注册
- 持久存储用户信息
- 问题
- 退出登录
- 导航守卫
- 解决问题
持久存储用户信息
- 本地存储：（在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)
- to:跳转的目的路由信息(如下图
解决问题
- 用户登录了，不能在进入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();}
})
① 路由守卫关注有没有token(有没有登录)，有没有获取信息（派发getUserInfo)
② 请求不到用户信息，说明token无效(过期了)，则清除token,跳到登录页，重新登录
③ 没有token，一定没有用户信息；有用户信息则放行所有