vue怎麼判斷登陸密碼需要什麼參數

Ⅰ vue中如何做加密登陸

1.首先要了解rsa加密的流程：

第一步返回publicKey前端，用來對password等敏感欄位的加密。

第二步，前端進行password敏感欄位的加密。

第三步post數據給後端。

第四步用publicKey與privateKey進行解密。

具體如下：

我們可以藉助elemetui的表單驗證，如下： 

submitForm(formName) {

        this.$refs[formName].validate((valid) => {

          if (valid) {

（在這里請求我的後台加密公鑰和私鑰）

然後對我的登錄密碼進行rsa加密： let password = RSA(this.publicKeyMolus, this.logUserInfo.password, this.publicKeyExponent)

（ranhou

          } else {

            console.log('error submit!!');

            return false;

          }

        });

Ⅱ SpringBoot+Vue項目中實現登錄驗證碼校驗

在各大項目中，為保證數據的安全性，通常在登錄頁面加入驗證碼校驗，以防止爬蟲帶來的數據泄露危機。本文將介紹在前後端分離的項目中，怎樣實現圖形驗證碼校驗。

第一步：在後端創建一個生成隨機驗證碼的工具類和接收請求驗證碼的介面。工具類的主要作用生成隨機驗證碼和對應的圖片。介面的作用是將生成的隨機驗證碼保存到session，同時，將圖片進行base64編碼，然後返回給前端。

第二步：在登錄頁面創建的同時獲取驗證碼，並將後端傳回來得key和編碼後的字元串拼接，綁定img標簽的src屬性。此外，當用戶點擊驗證碼的img標簽時，重新獲取驗證碼，後端session更新驗證碼。

第三步：後端登錄介面接收登錄請求時，將用戶提交的驗證碼和session中的驗證碼進行比對，不相同則返回相應信息給前端進行提示，相同則進行賬號密碼的匹配。

Ⅲ Vue項目中用戶登錄及token驗證及流程圖

在前後端完全分離的情況下，Vue項目中實現token驗證大致思路如下：

簡單舉例說明：

① 調登錄介面成功，在回調函數中將token存儲到localStorage和vuex中（login.vue中）

② store文件夾下的index.js

③ 路由守衛（router文件夾下的index.js）

④ 請求頭加token

⑤ 如果前端拿到狀態碼為401，就清除token信息並跳轉到登錄頁面

流程圖：

Ⅳ Vue項目：後台管理系統登錄頁的記住密碼的功能如何實現

當在做後台管理系統時，經常需要做到點擊記住密碼，然後登錄進入系統後，一番操作後退出系統希望能夠自動的記住上次登錄的賬號密碼，這個功能實現並不算復雜。

記住密碼的選項的值動態的綁定一個checked值，這個值默認為false，當選中的時候才去賦予一個true值，然後通過這個值當登錄將賬號密碼提交的時候，根據checked的布爾值將賬號密碼存到本地存儲中，如果為true則存賬號密碼，如果為false，則存個空對象進去。當用戶操作完退出登錄時，會退到登錄頁，此時會執行一次login組件的生命周期，就可以在生命周期中將本地存的值再次重新賦予到登錄頁的表單中去，這樣就實現了登錄時記住密碼的功能。

3.1.1、登錄的表單

3.1.2、從父組件接收過來的數據
loginForm：表單的賬號密碼的數據，hasChecked：是否選擇記住密碼

3.1.3、登錄表單的校驗

3.1.4、深度監聽登錄表單form
主要是監聽退回登錄頁時，看錶單頁的數據是否填充，如果有數據填充，觸發監聽，並且執行init()初始化表單的方法。

3.1.5、init初始化
將選項布爾值重新賦值

3.2.1、子組件的引入

3.2.2、判斷本地緩存中是否有數據，有的話那麼就在生命周期中去給表單項進行賦值操作

3.2.4、提交按鈕進行的邏輯操作
這部分需要判斷是否選擇了記住密碼，如果勾選了，那麼就將當前的賬號密碼存入，如果沒有，那麼就存入個空對象，一方面清空之前存入的賬號密碼，另一方面保證了下次登錄不會帶入數據。

3.2.5、保存用戶設置的方法
這個方法是去保存用戶是否勾選了記住密碼的

最後大致的功能就實現了，當然為了安全性，最好在存入本地之前進行md5加密（其他的加密也行，比如：AES加密），然後在生命周期去賦值的時候再去進行解密賦值到表單項上去，這樣安全性就提升了。

Ⅳ vue實現登陸注冊功能（小白篇）

在前後端完全分離的情況下，Vue項目中實現token驗證大致思路如下：

1、第一次登錄的時候，前端調後端的登陸介面，發送用戶名和密碼

2、後端收到請求，驗證用戶名和密碼，驗證成功，就給前端返回一個token

3、前端拿到token，將token存儲到localStorage和vuex中，並跳轉路由頁面

4、前端每次跳轉路由，就判斷 localStroage 中有無 token ，沒有就跳轉到登錄頁面，有則跳轉到對應路由頁面

5、每次調後端介面，都要在請求頭中加token

6、後端判斷請求頭中有無token，有token，就拿到token並驗證token，驗證成功就返回數據，驗證失敗（例如：token過期）就返回401，請求頭中沒有token也返回401

7、如果前端拿到狀態碼為401，就清除token信息並跳轉到登錄頁面

vue-cli搭建一個項目，簡單說明前端要做的事：

一、調登錄介面成功，在回調函數中將token存儲到localStorage和vuex中

login.vue

<template>

  <div>

    <input type="text" v-model="loginForm.username" placeholder="用戶名"/>

    <input type="text" v-model="loginForm.password" placeholder="密碼"/>

    <button @click="login">登錄</button>

  </div>

</template>

<script>

import { mapMutations } from 'vuex';

export default {

  data () {

    return {

      loginForm: {

        username: '',

        password: ''

      }

    };

  },

  methods: {

    ...mapMutations(['changeLogin']),

    login () {

      let _this = this;

      if (this.loginForm.username === '' || this.loginForm.password === '') {

        alert('賬號或密碼不能為空');

      } else {

        this.axios({

          method: 'post',

          url: '/user/login',

          data: _this.loginForm

        }).then(res => {

          console.log(res.data);

          _this.userToken = 'Bearer ' + res.data.data.body.token;

          // 將用戶token保存到vuex中

          _this.changeLogin({ Authorization: _this.userToken });

          _this.$router.push('/home');

          alert('登陸成功');

        }).catch(error => {

          alert('賬號或密碼錯誤');

          console.log(error);

        });

      }

    }

  }

}

</script>

store文件夾下的index.js

import Vue from 'vue';

import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({

  state: {

    // 存儲token

    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''

  },

  mutations: {

    // 修改token，並將token存入localStorage

    changeLogin (state, user) {

      state.Authorization = user.Authorization;

      localStorage.setItem('Authorization', user.Authorization);

    }

  }

});

export default store;

二、路由導航守衛

 router文件夾下的index.js

import Vue from 'vue';

import Router from 'vue-router';

import login from '@/components/login';

import home from '@/components/home';

Vue.use(Router);

const router = new Router({

  routes: [

    {

      path: '/',

      redirect: '/login'

    },

    {

      path: '/login',

      name: 'login',

      component: login

    },

    {

      path: '/home',

      name: 'home',

      component: home

    }

  ]

});

// 導航守衛

// 使用 router.beforeEach 注冊一個全局前置守衛，判斷用戶是否登陸

router.beforeEach((to, from, next) => {

  if (to.path === '/login') {

    next();

  } else {

    let token = localStorage.getItem('Authorization');

    if (token === 'null' || token === '') {

      next('/login');

    } else {

      next();

    }

  }

});

export default router;

三、請求頭加token

// 添加請求攔截器，在請求頭中加token

axios.interceptors.request.use(

  config => {

    if (localStorage.getItem('Authorization')) {

      config.headers.Authorization = localStorage.getItem('Authorization');

    }

    return config;

  },

  error => {

    return Promise.reject(error);

  });

四、如果前端拿到狀態碼為401，就清除token信息並跳轉到登錄頁面

        localStorage.removeItem('Authorization');

        this.$router.push('/login');

Ⅵ vue路由跳轉時判斷用戶是否登錄功能

一丶首先在用戶登錄前後分別給出一個狀態來標識此用戶是否登錄（建議用vuex）；
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
var state = {
isLogin:0, //初始時候給一個 isLogin=0 表示用戶未登錄
};
const mutations = {
changeLogin(state,data){
state.isLogin = data;
}
};
復制代碼
二丶在用戶登錄時改變登錄狀態；
1
this.$store.commit('changeLogin','100') //登錄後改變登錄狀態 isLogin = 100 ；
三丶重點來了；
在你的路由入口加上導航鉤子，具體什麼意思看代碼；
一丶設置需要校驗的路由
{ path: '/admin',
component: Admin,
meta:{auth:true} // 設置當前路由需要校驗 不需要校驗的路由就不用寫了；不要問為什麼，自己去看官網
}
二丶路由跳轉並校驗
復制代碼
router.beforeEach((to,from,next) => {
if(to.matched.some( m => m.meta.auth)){
// 對路由進行驗證
if(store.state.isLogin=='100') { // 已經登陸
next() // 正常跳轉到你設置好的頁面
}else{
// 未登錄則跳轉到登陸界面，query:{ Rurl: to.fullPath}表示把當前路由信息傳遞過去方便登錄後跳轉回來；
next({path:'/login',query:{ Rurl: to.fullPath} })
}
}else{
next()
}
})