關於vue-admin-template模板連接後端改造登錄功能
首先修改統一請求路徑為我們自己的登陸接口,在.env.development文件中
# base api VUE_APP_BASE_API = 'http://localhost:8081/api/dsxs/company'
打開登陸頁面,src/views/login/index.vue
<template> <div class="login-container"> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" class="login-form" auto-complete="on" label-position="left"> <div class="title-container"> <h3 class="title">Login Form</h3> </div> <el-form-item prop="username"> <span class="svg-container"> <svg-icon icon-class="user" /> </span> <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" tabindex="1" auto-complete="on" /> </el-form-item> <el-form-item prop="password"> <span class="svg-container"> <svg-icon icon-class="password" /> </span> <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="Password" name="password" tabindex="2" auto-complete="on" @keyup.enter.native="handleLogin" /> <span class="show-pwd" @click="showPwd"> <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> </span> </el-form-item> <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button> <div class="tips"> <span style="margin-right:20px;">username: admin</span> <span> password: any</span> </div> </el-form> </div> </template>
可以看到頁面使用組件對loginForm進行名稱和密碼的綁定
data() { const validateUsername = (rule, value, callback) => { if (!validUsername(value)) { callback(new Error('Please enter the correct user name')) } else { callback() } } const validatePassword = (rule, value, callback) => { if (value.length < 6) { callback(new Error('The password can not be less than 6 digits')) } else { callback() } }
這段代碼則為對輸入的內容進行驗證
看登陸的方法
handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true this.$store.dispatch('user/login', this.loginForm).then(() => { this.$router.push({ path: this.redirect || '/' }) this.loading = false }).catch(() => { this.loading = false }) } else { return false } }) }
其中 this.$store.dispatch('user/login', this.loginForm),不是請求後臺user/login接口,而是轉到modules下的user.js中的login方法,打開store/modules/user.js可以看到login方法。而login方法則是調用api/user.js中的login方法。
此時修改store/modules/user.js接收後臺傳來的響應數據
const actions = { // user login login({ commit }, userInfo) { const { username, password } = userInfo return new Promise((resolve, reject) => { login({ username: username.trim(), password: password }).then(response => { console.log(response) const { data } = response commit('SET_TOKEN', response.data.token) setToken(response.data.token) resolve() }).catch(error => { reject(error) }) }) },
同時在api/user.js中修改為我們後臺的請求地址
import request from '@/utils/request' export function login(data) { return request({ url: 'userlogin', method: 'post', data }) } export function getInfo(token) { return request({ url: 'userinfo', method: 'get', params: { token } }) }
此時可以發現模板采用的登陸方式是請求兩次,第一次通過用戶名密碼請求後端,後端判斷後,返回對應的token。然後在通過getInfo方法請求後端,獲取用戶真實信息。
在編寫後端之前還需要修改utils/request.js,因為默認狀態碼是20000為成功,而我們平時返回的是200
// if the custom code is not 20000, it is judged as an error. if (res.code !== 200) { Message({ message: res.message || 'Error', type: 'error', duration: 5 * 1000 })
簡單的編寫後端代碼,登陸方法根據賬號密碼查出用戶信息,根據用戶id與name生成token並返回,userinfo則是對token進行獲取,在查出對應值進行返回。
@CrossOrigin @RestController @RequestMapping("/api/dsxs/company") public class CompanyuserController { @Autowired private CompanyuserService companyuserService; //後臺登陸 @PostMapping("userlogin") @ResponseBody public R userlogin(@RequestBody UserVo userVo){ Companyuser companyuser = companyuserService.login(userVo); String token = JwtHelper.createToken(companyuser.getId(), companyuser.getName()); return R.ok().data("token",token); } //返回信息 @GetMapping("userinfo") public R userinfo( String token){ Integer userId = JwtHelper.getUserId(token); System.out.println("===="); Companyuser user = companyuserService.getById(userId); HashMap<String, String> map = new HashMap<>(); map.put("name",user.getName()); map.put("avatar",user.getAvatar()); return R.ok().data("name",user.getName()).data("avatar",user.getAvatar()); } }
我這裡使用@CrossOrigin註解解決的跨域問題。
到此這篇關於關於vue-admin-template模板連接後端改造登錄功能的文章就介紹到這瞭,更多相關vue admin template登錄內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue-Element-Admin集成自己的接口實現登錄跳轉
- Vue實現記住賬號密碼功能的操作過程
- Vue實現用戶登錄及token驗證
- vue3-pinia-ts項目中的使用示例詳解
- Django 實現jwt認證的示例