Token业务逻辑

最新推荐文章于 2024-05-24 20:23:06 发布

活泼小贺

最新推荐文章于 2024-05-24 20:23:06 发布

阅读量822

点赞数

文章标签： vue.js webpack javascript

本文链接：https://blog.csdn.net/m0_52174965/article/details/123198475

版权

本文详细介绍了前端开发中使用Vuex管理和存储Token的过程，包括用户登录、Token的获取与存储、请求拦截器的设置、页面刷新后的数据丢失问题以及退出登录的处理。重点讨论了Vuex的非持久化特性以及如何在多个组件间共享用户信息，并提出了使用localStorage来持久化存储Token以解决刷新后的问题。

摘要由CSDN通过智能技术生成

token是用户的唯一标识符

注册：通过数据库存储用户信息（名字、密码）
登录：登录成功的时候，后台为了区分这个用户是谁，服务器下发了token【令牌：唯一标识符】
一般情况：登录成功服务器会下发token，前台持久化存储token，（带着token找服务器要用户信息进行展示）
token就是一个随机的字符串

token需要存储

vuex存储数据不是持久化的，一刷新就全没了

在这里插入图片描述

    // 登录业务【token】
    async userLogin({commit},data) {
        let result = await reqUserLogin(data);
        console.log(result);
        if (result.code == 200) {
            // 服务器下发token，用户唯一标识符
            // 带着token找服务器要用户信息进行展示
            commit("USERLOGIN",result.data.token);
            return 'ok';
        } else {
            return Promise.reject(new Error('fail'));
        }
    }

home mounted完毕之后，在派发用户信息

在这里插入图片描述

// 拦截器(interceptors)
// 请求拦截器：在发请求之前可以监测到，可以做一些事情
requests.interceptors.request.use((config) => {
    // 需要携带token带给服务器
    if (store.state.user.token) {
        config.headers.token = store.state.user.token;
        console.log(store.state);
    }
    // 进度条开始动
    nprogress.start();
    // config：配置对象，对象里面有一个属性很重要,是headers请求头
    return config;
});

在这里插入图片描述

一刷新，就没了

vuex一刷新就没了，token也没了

一点击这个登录按钮，就会向服务器派发action----userLogin，捞数据----》

    methods: {
      // 登录的回调函数
      async userLogin() {
        const {phone,password} = this;
        try {
          // 一点击这个登录按钮，就会向服务器发请求，捞数据
          // 去仓库找userLogin
          (phone && password) && await this.$store.dispatch("userLogin",{phone,password});
          // 登录成功跳转到主页面上
          this.$router.push('./home');
        } catch (error) {
          alert(error.message);
        }
      }
    },

进入到登录页面----》

    // 登录业务【token】
    async userLogin({commit},data) {
        // 发请求
        let result = await reqUserLogin(data);
        if (result.code == 200) {
            // 服务器下发token，用户唯一标识符
            // 带着token找服务器要用户信息进行展示
            commit("USERLOGIN",result.data.token);
            return 'ok';
        } else {
            return Promise.reject(new Error('fail'));
        }
    },

// 登录用户的接口
export const reqUserLogin = (data) => requests({
    url:`/user/passport/login`,
    data,
    method:'post'
})

在仓库当中找reqUserLogin请求，带上token

但是你点击刷新

1.当用户注册完成，用户登录【用户名+密码】向服务器发请求（组件派发action）
2.登录成功，获取到token
3.存储到vuex仓库中（非持久化的）
4.路由跳转到home首页
5.因此在首页当中mounted派发action----getUserInfo，获取用户信息，动态展示header组件内容
6.一刷新home首页，获取不到用户信息（token：vuex非持久化存储）

BUG

多个组件展示用户信息需要在每一个组件中的mounted中触发this.$store.dispatch(‘getUserInfo’);

放在APP中，还没登录mounted已经执行完了，没有获取到用户信息-----》
再进入登录页面输入用户信息------》
因为APP只执行一次，所以获取不到用户信息了-----》
但是一刷新就有了，因为localStorage已经有了

用户已经登录，不能跳转到登录

退出登录

第一件事：需要发请求，通知服务器退出登录【清楚一些数据：token】
清除项目当中的数据【userInfo】

发请求得先有接口
先写接口 api文件下

    async userLogout() {
        let result = await reqUserLogout()
        if (result.code == 200) {
            
        }
    }
    先调用userLogout，再触发reqUserLogout()

  async userLogout({commit}) {
        let result = await reqUserLogout()
        if (result.code == 200) {
            commit("CLEAR");
            return 'ok'
        } else {
            return Promise.reject(new Error('fail'));
        }
    }
    action↑不能操作state，得提交commit，再到mutation里面修改state