vue 登录直接跳转首页

落日映苍穹つ 2022-11-17 10:23 243阅读 0赞

**目录**

one

首先在登录页面longin操作

创建utils.js

main.js中引用

store中user.js

two

--------------------

# one #

### 首先在登录页面longin操作 ###

在if中判断你返回的值是多少

handleLogin() {
    this.loading = true
          this.$store
            .dispatch('user/login', this.loginForm)
            .then((res) => {
              //判断您返回的值是什么
              if (res.code != 200) {
                this.$message.error('请输入正确账号密码')
              } else {
                this.$router.replace({ path: this.redirect || '/' })
              }
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
    }

created() {
        let Base64 = require('js-base64').Base64
        let channel = Base64.decode(this.$utils.getUrlKey('verinfo')).split(',')
        if (channel != undefined) {
          ;(this.loginForm.username = channel[0]),
            (this.loginForm.password = channel[1])
          this.handleLogin()
        }
      },

### 创建utils.js ###

export default {
        getUrlKey: function (name) {
            return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.href) || [, ""])[1].replace(/\+/g, '%20')) || null;
        }
    }
    /// 解密
    // export function Decrypt(str) {
    //     // let encryptedHexStr = CryptoJS.enc.Hex.parse(word);
    //     // let srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr);
    //     let decrypt = CryptoJS.AES.decrypt(str, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    //     let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8);
    //     return decryptedStr.toString();
    // }
    // /// 加密
    // export function AES_CBC_encrypt(word) {
    //     let srcs = CryptoJS.enc.Utf8.parse(word);
    //     let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 });
    //     return encrypted.ciphertext.toString().toUpperCase();
    // }

### main.js中引用 ###

import utils   from './utils'
    
    Vue.prototype.$utils=utils

## store中user.js  ##

store中user.js 的  const \{data\} = response 加不加这\{\}取决于您登陆验证 其次是在  resolve(data) 加上返回的data

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70][]

如果没有返回token  可以用下面这张写法

const  data  = response  下的if判断逻辑根据您的需求来写   例如：

if(data.data){
              commit('SET_TOKEN', data.token)
              setToken(data.token)
            }

或者

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70 1][]

# [http://链接地址ip:端口/\#/login?verinfo=][http_ip_login_verinfo]base64加密后的账号,密码 #

base64加密后的账号,密码为：\[账号,密码\]   账号和密码中间用,【逗号】隔开

**例如:YWRtaW4sMTIzMTIz   是  admin,123123          **base64加密后的账号,密码则为         **YWRtaW4sMTIzMTIz**

# two   #

handleLogin() {
          // this.$refs.loginForm.validate((valid) => {
          //   if (valid) {
          //     this.loading = true;
          //     this.$store
          //       .dispatch("user/login", this.loginForm)
          //       .then((res) => {
          //         if (res.code != 200) {
          //           this.$message.error("请输入正确账号密码");
          //         } else {
          //           this.$router.replace({ path: this.redirect || "/" });
          //         }
          //         this.loading = false;
          //       })
          //       .catch(() => {
          //         this.loading = false;
          //       });
          //   } else {
          //     // console.log('error submit!!')
          //     return false;
          //   }
          // });
    
             this.loading = true
          this.$store
            .dispatch('user/login', this.loginForm)
            .then((res) => {
              if (res.code != 200) {
                this.$message.error('请输入正确账号密码')
              } else {
                this.$router.replace({ path: this.redirect || '/' })
              }
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        },

created() {
        let channel = decodeURIComponent(
          (new RegExp("[?|&]" + "verinfo" + "=" + "([^&;]+?)(&|#|;|$)").exec(
            location.href
          ) || [, ""])[1].replace(/\+/g, "%20")
        ).split(",");
        if (channel != undefined && channel.length > 1) {
          (this.loginForm.username = channel[0]),
            (this.loginForm.password = channel[1]);
          console.log(this.loginForm.username);
          console.log(this.loginForm.password);
          this.handleLogin();
        }
      },

[http://链接地址ip:端口/\#/login?verinfo=][http_ip_login_verinfo]账号,密码

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70]: /images/20221022/f93a634226e9404f96543021bd4cbfcf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjEyMDY2OQ_size_16_color_FFFFFF_t_70 1]: /images/20221022/5a67642c20f640119e3c4c53dac68b00.png
[http_ip_login_verinfo]: http://124.164.242.71:8093/#/login?verinfo=YWRtaW4sdHNjY3RzY2M=