07-vue移动端项目(搜索结果searchResult页面的一些优化，自己封装插件Vue.use（MyPulgin)来判断登录，token失效处理，)

最新推荐文章于 2024-11-27 21:05:24 发布

原创最新推荐文章于 2024-11-27 21:05:24 发布 · 352 阅读

0 ·

CC 4.0 BY-SA版权

笔记专栏收录该内容

67 篇文章

订阅专栏

判断登录

01- 直接在评论按钮中完成登录判断

步骤：

a. 给评论按钮添加一个点击事件
- 在事件中判断用户是否登录：判断 $store 中是否存在 token
  - 用户登录：执行后续的逻辑代码（也就打印：评论功能）
  - 用户未登录：跳转到登录页面进行登录

02 - 将登录验证封装为一个全局方法

如果将登录验证的方法直接写到逻辑代码中，将来重用不太方便，我们可以尝试将登录验证的代码封装为一个 vue 的全局方法

步骤：

a. 在 main.js 中向 Vue 的 prototype 中添加一个 $login 方法
- 在方法中完成登录的验证

// 在js中this.toast是用不了的,所以要导入
import { Toast } from 'vant';
// 还要
Vue.use(Toast);

// 封装一个公共的登录验证的方法
Vue.prototype.$login = function () {
 // 判断有没有登录token是否存在
 if (store.state.userInfo.token) {
   return true // 说明用户已经登录可以直接执行后续的代码
 } else {
   Toast.fail('对不起,还未登录,请登录!')
   // 跳转去登录页面
   router.push('/login')
   return false // 说明用未登录,应该进行登录操作
 }
}

b. 在点赞按钮中通过: this.$login 方法来验证登录

 zan () {
      if (!this.$login()) {
        return // 中止后面的代码
      }
      console.log('点赞,处理后续逻辑')
    }

03 - 插件的使用

$login 方法如果直接放到 main.js 中会造成 main.js 中的逻辑代码过多，代码结构不够清晰

可以将 $login 方法封装为 vue 的一个插件：以此来将方法提取到其它文件中，保证 main.js 代码的单一性

基本概念：

插件通常用来为 Vue 添加全局功能。一般在使用插件时都使用 Vue.use(xxx)

封装插件：

使用插件：

// 调用 `MyPlugin.install(Vue)`
Vue.use(MyPlugin)

new Vue({
  // ...组件选项
})

创建插件：

// 定义一个插件对象
var pluginObj = {}
// 给插件对象添加一个 `install` 方法
pluginObj.install = function (Vue) {
	// 可以给 Vue 添加一些全局的方法了
}
// 将插件对象暴露出去
export default pluginObj

注意点：

使用插件：
- 插件的使用代码必须放到创建 vue 实例之前
- 使用 use 方法来使用插件
- use 方法其实相当于是调用插件的 install 方法
创建插件：
- 插件必须有一个方法 install 方法
- 这个 install 方法有一个参数： vue 构造器

04 - 将登录验证方法封装为一个插件

步骤：

a. 在 utils 下面创建一个文件： myplugin.js
b. 在文件中：
- 创建一个对象
- 给对象添加一个 install 方法
- 在 install 方法中给 Vue 添加一个 $login 方法
- 导出这个对象

 // 封装vue插件:用来判断用户是否登录
// 插件都可以用Vue.use()出来
import Vue from 'vue'
import router from '../router/index'
import store from '../store/index'
import { Toast } from 'vant'
Vue.use(Toast)

// 创建一个对象
const pluginObj = {}
// 添加一个install方法
pluginObj.install = function (Vue) {
 // 在这个方法里面:设置一个给Vue添加全局的方法
 Vue.prototype.$login = function () {
   //   用户登录了
   if (store.state.userInfo.token) {
     return true
   } else {
   // 用户没有登录
     Toast.fail('还未登录,请登录!')
     router.push('/checkLogin')
     return false
   }
 }
}
// 导出插件对象
export default pluginObj

c. 在 main.js 中导入这个文件

// 导入插件
import MyPlugin from '@/utils/myplugin'

d. 通过 Vue.use 来使用这个插件

- // 注册我封装的插件
Vue.use(MyPlugin)

05 - 登录成功后回退到登录之前的页面

问题：

登录页面需要有两个逻辑：

如果是验证登录：应该返回到登录之前的页面
比如我们是点击评论结果没登录就会被打回到登录页去登录，那我们在此登录之后进入应该进入到的页面是可以评论的搜索结果searchResult页面去

如果是正常登录：应该跳转到首页index页面去

解决方案：

给登录页面设置两个路由：

checklogin：用来单独处理验证登录（验证登录之后跳转到上一个页面）

login：用来进行正常登录（登录之后跳转到主页）

步骤：

a. 在 router 中给 login 组件再添加一个路由 checklogin
b. 在 login 组件的 login 方法中在登录成功之后的代码中添加判断：
- 得到当前页面的路由
  - this.$route.path
- 判断当前页面的路由
  - 如果路由名为 checkLogin ：就需要回退到上一个页面
    - 调用： this.$router.back()
  - 如果路由名为 login ：就需要跳转到首页
    - 调用： this.$router.push(’/index’)
c. 在验证验证的 $login 方法中，如果判断出用户没有登录，应该跳转到 /checkLogin 中
注意点：
- 项目中需要分享的按钮但没有分享的接口，所以这个功能只能在点击时弹出一个分享界面

06 - token 失效的处理方式

在这里插入图片描述

问题：

token 有一个特点：会隔两个小时会过期一次，一旦 token 过期将来服务器请求的接口中如果携带了 token 服务器就会响应 401 的错误信息

解决方案：

可以使用 refresh_token 来解决以上问题

来源：当我们在登录页面进行登录时，服务器会返回一个对象，对象中有两个属性： token & refresh_token

token：时效两个小时。用来保存用户的登录信息

refresh_token：时效14天。当 token 失效时，可以使用 refresh_token 去服务器中更新 token

步骤：

a. 先捕获到当前请求的错误信息
b. 判断当前请求的错误信息是否是 401，如果是 401 说明 token 过期了
c. 将 refresh_token 重新提交到服务器得到新的 token
d. 用新的 token 将过期的 token 覆盖掉
e. 继续完成未完成的请求

注意点：

响应回来的错误信息时包含以下属性：
- config：发送错误请求的所有的配置信息
- request：当前发送错误请求相关的请求信息
- response：当前发送错误请求相关的响应信息
  - status ：401响应回来的状态码