vue关于登录操作的封装--参考RouYi框架

首先感谢RouYi框架提供的一些思路及参考代码,向RuoYi大佬致敬!

Tips:阅读本文前,先了解一下cookie,vue,encrypt,路由拦截等一些基础知识,有了这些知识的沉淀,下面的理解起来会更简单一些。

我们在着手登录页的设计时,需要考虑到登录验证,token存储以及token过期相应操作,encrypt密码加密,路由拦截,登录权限管理等等,有了一个大概的思路,才能进行代码的编写,否则就像我刚开始那样bug连篇,后期不断的填坑🙄,浪费时间浪费精力。所以为了避免大家走弯路,本文对登录操作做一个详细的介绍。

注:1、本文只对Rouyi框架前端登录操作的思路介绍,涉及到相关的后端操作需自行学习;

       2、主要使用的框架及工具:vue2+vuex+vue-router+ElementUi;

       3、关于本文用到的相关依赖包及其版本也会在对应模块分别作注释;

       4、本文只是一些个人拙见,如若有不妥之处或疑惑,还希望各位大佬在评论区批评指正,切勿引战`(*>﹏<*)′

一、流程图

首先说下登录的思路:

 大概的流程就是这样,其中还包含用户权限判断暂时未添加进去。

二、实现方法

1.先介绍一下关于Cookie管理token的封装

这里借助的依赖包是js-cookie版本^3.0.1 在utils目录下新建auth.js文件,实现获取、添加、删除token三个方法,具体代码如下

import Cookies from "js-cookie";

const TokenKey = "MyToken";

export function getToken() {
  return Cookies.get(TokenKey);
}

export function setToken(token) {
  return Cookies.set(TokenKey, token);
}

export function removeToken() {
  return Cookies.remove(TokenKey);
}

 2.登录接口api模块的封装以及vuex的user模块管理

1.api模块的封装

        这里采用的是axios请求接口,关于axios接口封装后期会出一期教程。主要是对验证码的请求以及登录登出的验证请求

// request模块封装这里未给出!!!
// 登录方法
export function login(username, password, code, uuid) {
  const data = {
    username,
    password,
    code,
    uuid
  };
  return request({
    url: "/login",
    headers: {
      isToken: false
    },
    method: "post",
    data: data
  });
}

// 退出方法
export function logout() {
  return request({
    url: "/logout",
    method: "post"
  });
}

// 获取验证码
export function getCodeImg() {
  return request({
    url: "/captchaImage",
    headers: {
      isToken: false
    },
    method: "get",
    timeout: 20000
  });
}

2.vuex的user模块管理

        vuex版本是^3.6.2,在src下新建store文件夹并在其下新建index.js和modules文件夹,在modules文件夹下新建user.js模块,不要忘记在main.js中引入store哦!

user模块主要是负责管理用户登录登出,记住密码的操作

main.js

import Vue from "vue";
...
import store from "./store";
...

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

index.js

import Vue from "vue";
import Vuex from "vuex";
import user from "./modules/user.js";

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    user,
  },
});

user.js

import { login, logout } from "@/api/login/login.js";
import { getToken, setToken, removeToken } from "@/utils/auth";
import { Message } from "element-ui";

const user = {
  state: {
    token: getToken(),
    name: "",
    permissions: []
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token;
    },
    SET_NAME: (state, name) => {
      state.name = name;
    },
    SET_PERMISSIONS: (state, permissions) => {
      state.permissions = permissions;
    }
  },

  actions: {
    // 登录
    Login({ commit }, userInfo) {
      const username = userInfo.username.trim();
      const password = userInfo.password;
      const code = userInfo.code;
      const uuid = userInfo.uuid;
      return new Promise((resolve, reject) => {
        login(username, password, code, uuid)
          .then(res => {
            if (res.code === 200) {
              setToken(res.token);
              commit("SET_TOKEN", res.token);

              resolve();
            } else {
              Message.error(res.msg);
              return;
            }
          })
          .catch(error => {
            reject(error);
          });
      });
    },

    // 退出系统
    LogOut({ commit, state }) {
      return new Promise((resolve, reject) => {
        commit("SET_TOKEN", "");
        commit("SET_PERMISSIONS", []);
        removeToken();
        resolve();
      });
    },

    // 前端 登出
    FedLogOut({ commit }) {
      return new Promise(resolve => {
        commit("SET_TOKEN", "");
        removeToken();
        resolve();
      });
    }
  }
};

export default user;

3.验证输入框是否为空

先在data()中建立对象

   loginForm: {

        username: "QDTG",

        password: "",

        rememberMe: true,

        code: "",

        uuid: ""

      },

在模板的input标签中双向数据绑定v-model="loginForm"

验证方法主要是判断input中的数据是否为空方法如下

validate() {
      // 验证输入框是否存在空
      if (
        this.loginForm.code == undefined ||
        this.loginForm.username === undefined ||
        this.loginForm.password === undefined
      ) {
        Message.error("请输入账号、密码、验证码!");
        return false;
      } else {
        return true;
      }
},

 4.验证账号密码是否正确,并对密码加密存储在cookie中

如果登录勾选了记住密码操作则将密码通过encrypt加密保存在cookie中

加密模块依赖

"jsencrypt": "3.0.0-rc.1",

 /utils/jsencrypt.js

import JSEncrypt from "jsencrypt/bin/jsencrypt.min";

// 密钥对生成 http://web.chacuo.net/netrsakeypair

const publicKey =
  "根据网站生成的公钥钥填入" +
  "根据网站生成的公钥钥填入";

const privateKey =
  "根据网站生成的私钥填入";

// 加密
export function encrypt(txt) {
  const encryptor = new JSEncrypt();
  encryptor.setPublicKey(publicKey); // 设置公钥
  return encryptor.encrypt(txt); // 对数据进行加密
}

// 解密
export function decrypt(txt) {
  const encryptor = new JSEncrypt();
  encryptor.setPrivateKey(privateKey); // 设置私钥
  return encryptor.decrypt(txt); // 对数据进行解密
}

/components/Login.vue

handleLogin() {
      if (this.validate()) {
        this.loading = true;
        // 是否记住密码
        Cookies.set("username", this.loginForm.username, { expires: 30 });
        Cookies.set("password", encrypt(this.loginForm.password), {
          expires: 30
        });
        Cookies.set("rememberMe", this.loginForm.rememberMe, {
          expires: 30
        });
        this.$store
          .dispatch("Login", this.loginForm)
          .then(() => {
            this.$router.push({ path: "/home" }).catch(() => {});
          })
          .catch(() => {
            this.loading = false;
            if (this.captchaOnOff) {
              this.getCode();
            }
          });
      }
 }

5. 路由拦截

在src下新建premission.js,并在main.js中引入。该模块是为了给登录操作进行路由拦截,如果用户未登录或登录信息过期,则不允许用户进入页面,或者添加页面白名单,在白名单内的页面允许未登录状态下进入,其他一律跳转到登录页面。

// main.js
// 登录验证
import "./permission"; // permission control

 permission.js

import router from "./router";
import store from "./store";
import { Message } from "element-ui";
import { getToken } from "@/utils/auth";
import { isRelogin } from "@/utils/request";

const whiteList = ["/login"];

router.beforeEach((to, from, next) => {
  if (getToken()) {
    /* has token*/
    if (to.path === "/login") {
      next({ path: "/home" });
    } else {
      next();
    }
  } else {
    // 没有token
    if (whiteList.indexOf(to.path) !== -1) {
      // 在免登录白名单,直接进入
      next();
    } else {
      next(`/login?redirect=${to.fullPath}`); // 否则全部重定向到登录页
    }
  }
});

router.afterEach(() => {});

到此一个简单的登录就大致完成了,希望该教程能够帮到各位,喜欢的小伙伴来个点赞关注收藏吧!非常感谢!

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
为了封装vue-ueditor-wrap,可以按照以下步骤进行操作: 1.安装vue-ueditor-wrap和ueditor ```shell npm install vue-ueditor-wrap ueditor --save ``` 2.在main.js中引入ueditor ```javascript import Vue from 'vue' import App from './App.vue' import UEditor from 'vue-ueditor-wrap' import 'ueditor/ueditor.config.js' import 'ueditor/ueditor.all.min.js' import 'ueditor/lang/zh-cn/zh-cn.js' Vue.component('u-editor', UEditor) new Vue({ el: '#app', render: h => h(App) }) ``` 3.在组件中使用vue-ueditor-wrap ```vue <template> <div> <u-editor v-model="content"></u-editor> </div> </template> <script> export default { data() { return { content: '' } } } </script> ``` 4.封装vue-ueditor-wrap为一个独立的组件 ```vue <template> <div> <u-editor v-model="content"></u-editor> </div> </template> <script> import UEditor from 'vue-ueditor-wrap' import 'ueditor/ueditor.config.js' import 'ueditor/ueditor.all.min.js' import 'ueditor/lang/zh-cn/zh-cn.js' export default { name: 'VueUeditorWrap', components: { UEditor }, props: { value: { type: String, default: '' } }, data() { return { content: this.value } }, watch: { value(val) { this.content = val }, content(val) { this.$emit('input', val) } } } </script> ``` 5.在其他组件中使用封装好的vue-ueditor-wrap组件 ```vue <template> <div> <vue-ueditor-wrap v-model="content"></vue-ueditor-wrap> </div> </template> <script> import VueUeditorWrap from './VueUeditorWrap.vue' export default { components: { VueUeditorWrap }, data() { return { content: '' } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值