vue-cli3项目通过vue如何引入第三方js包完成登陆功能

电玩女神 2021-09-01 09:51 327阅读 0赞

**注意：本次登陆，前后端分离；前端通过引入第三方的js包，调用js包里的初始化方法和提交方法完成登陆以及退出；**

**流程1.引入第三方包**

*  1.1在index.html文件下引入

![2][]

**流程2.完成初始化**

*  在组件的created下完成初始化

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center]  
***问题2.1因为初始化的时候，必须传递后端分配的state，用作验证*。**

*  当时做了几种传递state的方式，方式1：前端到了login页面后先请求借口获取state的值，然后传递给初始化的state，发现行不通（确实初始化赋值上去了分配的state，但是登陆失败，后端说不支持）；

**流程3.拦截跳转：**

*  最后采取方式2：前端在刚打开项目时候，路由是先进入 “/”，通过路由导航守卫进行拦截，如果是去路由 “/” 或者去“/login”，我就拦截住直接让页面跳到后端写的一个地址A，跳到这个地址A后，后端会帮我重定向到我本地的前端登录页（注意，一定要后端跳到本地的登录页，否则本地联调时候，监听不到你的路由变化，也没办法执行你登录页的操作），并且携带好state值；这样获取到的state的值，就可以用于初始化了；

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 1]

*  先是路由进入’/’
 *

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 2]

*  主动拦截跳到后端地址，
 *

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 3]

*  后端定向到前端本地登录页，完成初始化
 *

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 4]

**流程4.点击登录**

*  同样登陆由于是js包需要配置，登录成功后，直接由后端重定向到前端本地的主页，并且携带上获取用户信息的sessionId。
 *  根据路由导航，如果url是去主页且有获取用户信息的sessionId，那么就通过到主页；如果sessionId是错误，到主页后会被定向到登录页；登录成功后将sessionId储存在本地

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 5]

**流程5.配置拦截器**：在marn.js中配置

*  每次访问时候，请求头上传递sessionId，后端做判断；
 *  每次响应做拦截，判断登录状态是否有问题

// 配置axios的请求拦截器
    axios.interceptors.request.use(
      function(config) { 
        // 在发送请求之前做些什么
        // console.log('请求到了哟', config.headers.Authorization)
        // 统一的给config设置 token
        config.headers.sessionId = JSON.parse(
          localStorage.getItem("tokenSessionId")
        );
        return config;
      },
      function(error) { 
        // 对请求错误做些什么
        return Promise.reject(error);
      }
    );
    //响应拦截器 与后端定义状态是100签名错误 跳转到登录界面
    axios.interceptors.response.use(
      function(response) { 
        // 对响应数据做点什么
        console.log(response.data);
        console.log(store);
        console.log(router.currentRoute.query.sessionId);
        //当返回信息为未登录或者登录失效的时候重定向为登录页面
        if (response.data.success == 9) { 
          //{"data":“sessionId”,"message":"登录已过期，请重新登录","success":9}
          localStorage.clear("tokenLoginUser");
          localStorage.clear("tokenUserName");
          localStorage.clear("tokenRoleCode");
          localStorage.clear("tokenSessionId");
          //走退出的功能（不能直接路由到登录页 会死循环）
          message.warning(response.data.message);
          setTimeout(() => { 
            window.location.href = `http://zjt.djbx.com/uc-oidc/oauth/logout?redirectUrl=http://10.7.102.161:8082/localLogin/toLogin?type=3-${ this.$route.query.sessionId}`;}, 2000);
          tuichu2();
        }
        return response;
      },
      function(error) { 
        // 对响应错误做点什么
        return Promise.reject(error);
      }

**流程6.退出登录**

*  重置本地数据，调用后端退出的接口，传递登录用户的sessionId，后端做清除

tuichu() { 
          window.location.href = `http://zjt.djbx.com/uc-oidc/oauth/logout?redirectUrl=http://10.7.102.161:8082/localLogin/toLogin?type=3-${ this.$route.query.sessionId}`;
          localStorage.clear("tokenLoginUser");
          localStorage.clear("tokenUserName");
          localStorage.clear("tokenRoleCode");
          localStorage.clear("tokenSessionId");
          this.$store.state.loginUser = "";
          this.$store.state.userName = "";
          this.$store.state.roleCode = "";
          this.$store.state.windowCONTENT = "http://10.7.102.161:8082/aegis/";
          this.$store.state.tabType = "myDistribution"; //标签页的类型控制v-if（项目）
          this.$store.state.tabArr = [
            { 
              name: "我的分发",
              key: "myDistribution",
              title: "我的分发",
              type: "我的分发",
            },
          ]; //标签页的数组
          this.$store.state.tabKey = "myDistribution"; //标签页的key即点击打开了哪个
          this.$store.state.menuKey = ["2"]; //侧边栏的默认打开key同时用来控制侧边栏的高亮

总结：本次登录是特殊的js包完成的，所以记录一下；  
正常的登录可参考此篇文章，[vue项目登录及token验证 vue-ant][vue_token_ vue-ant]

[2]: /images/20210724/4a8a631c78c34003926aa1e4be936bb6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center]: /images/20210724/82d7d139446045e4aabb73ba4456ae56.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210724/fcf1eeca710846dd8bf1df9df58d2850.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20210724/3295d97e9dad4c8abf056d248d45a49f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20210724/d075bb42e3ed43ba90f614b5d218c4a3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20210724/16506d4865804812b1d59875241cbb85.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2lfYW1fYV9kaXY_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20210724/327985d64b8c4079bd88c0a0d2d3797e.png
[vue_token_ vue-ant]: https://blog.csdn.net/i_am_a_div/article/details/107718774