项目中前端如何处理token

token-处理-整体分析

背景

在项目中,后端接口中只有登录接口是不需要token的,其他接口都需要token才能访问。

分析

登陆功能之后,从后端获取到了token值,在接下来的其他请求中,接口服务器都会去检查token值,这里我们提前把它保存到统一管理公共状态的 vuex 中:

公共状态的 vuex中

token-处理-将token保存到vuex中

目标

使用vuex来保存登录接口获取到的token

vuex的基本使用流程

使用vuex的基本逻辑:数据放在state中,要修改数据则调用mutations

  1. 先在state中补充定义token
  2. 同时,要提供对应的用来修改tokenmutation,以方便在用户登陆成功之后,去设置token

整体思路如下:

vuex的基本使用流程

初始化token状态

由于项目中,已经用了modules,直接在store/modules/user.js中定义token:

const state = {
  token: null // 默认为null
}

提供操作token的mutation

store/modules/user.js中:

// 修改状态
const mutations = {
  // 设置token
  setToken(state, newToken) {
    state.token = token // 设置token
  },
  // 删除token
  removeToken(state) {
    state.token = null // 删除vuex的token
  }
}

成功登录后提交mutation

在src/login/index.vue中:

async doLogin() {
      try {
        const res = await login(this.loginForm)
        // console.log('用户登录ok', res)
        console.log('用户登录,返回token', res.data) 
        // 1. 保存token到vuex
        // 如何在组件调用带命名空间mutations
        // this.$store.commit("命名空间/mutations名",载荷)
+       this.$store.commit('user/setToken', res.data)
      } catch (err) {
        alert('用户登录,失败')
        console.log('用户登录,失败', err)
      }
    },
    handleLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          this.doLogin()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }

注意:由于mutation定义在modules中,所以在commit时,加补充modules的前缀/user/setToken

调试

在vue调试工具中核实效果:

成功登录后提交mutation

总结

使用vuex的基本流程:

  1. 定义数据。 在state中定义。
  2. 定义mutations。用它来操作数据。
  3. 在组件中调用mutationsthis.$store.commit(‘模块名/mutation的名字’, 参数)

token-处理-axios请求拦截器统一注入

token作为我们其它请求的用户标识,我们使用请求拦截器做一下统一处理,让每一个请求的header中都拥有token

公共状态的 vuex中

目标

将登陆获取到的token统一注入到接口的请求头中 。

思路

我们在上面的操作中已经将token保存到了vuex中,接下来,只需要在axios 的请求拦截器中取出token值再填充到header中即可。

请求拦截器代码

在文件**src/utils/request.js**中:

  • 引入store
  • 补充请求拦截器,代码逻辑是:
    • 如果当前vuex中有token,就在请求头中设置上。
// 不是在vue组件中,不能通过this.$store.state.user....来获取token
// 要导入
import store from '@/store'

service.interceptors.request.use(
  config => {
    const token = store.state.user.token
    // 如果当前存有token,就加在请求头上
    if (token) {
      config.headers['Authorization'] = `Bearer ${token}`
    }
    return config
  }
  , error => {
  return Promise.reject(error)
}) 

上面的authorizationbearer是本项目的后端接口要求的写法。

测试

1. 在api/user.js中封装一个api去请求用户信息

/**
 * @description: 获取用户资料
 * @param {*} 
 * @return {*}
 */
export function getUserProfile() {
  return request({
    url: '/sys/profile',
    method: 'post'
  })
}

当然这个接口是需要token才能访问的。

2. 在login/index.vue中补充按钮来测试调用它

重点检查请求头中是否携带了token。

小结

语法:在普通.js文件中使用store时,直接导入模块即可。

业务:所有的请求都会经过请求拦截器,所以方便它用来统一给请求头中添加token。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有资源及文章均来源于网络及用户分享或为本站原创,仅限用于学习和研究,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 项目中前端如何处理token

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们