vue.js中實(shí)現(xiàn)登錄控制的方法示例
本文實(shí)例講述了vue.js中實(shí)現(xiàn)登錄控制的方法。分享給大家供大家參考,具體如下:
vue中使用vue-router實(shí)現(xiàn)登錄的控制在做后臺管理系統(tǒng)中很常見,但是不想之前熟悉的流程那樣,不過只要大家理解vue-router的使用也是很好實(shí)現(xiàn)的。
首先我們需要編寫登錄頁面和主頁面:
<template> <div class="login"> <table width="100%" height="100%"> <tr height="41"><td class="logintb" colspan="2"> </td></tr> <tr height="100%" class="loginbg"> <td id="left_cont"> <table width="100%" height="100%"> <tr height="155"><td colspan="2"> </td></tr> <tr> <td width="20%" rowspan="2"> </td> <td width="60%"> <table width="100%"> <tr height="70"><td align="right"></td></tr> <tr height="274"> <td valign="top" align="right"> <img src="../../static/images/logo.png"/> </img/> </td> </tr> </table> </td> <td width="15%" rowspan="2"> </td> </tr> <tr><td colspan="2"> </td></tr> </table> </td> <td id="right_cont"> <table height="100%"> <tr height="30%"><td colspan="3"> </td></tr> <tr> <td width="30%" rowspan="5"> </td> <td valign="top" id="form"> <table valign="top" width="50%"> <tr><td colspan="2"><h4 style="letter-spacing:1px;font-size:16px;">管理后臺</h4></td></tr> <tr><td>管理員:</td><td><input type="text" v-model.trim="username" value="" /></td></tr> <tr><td>密 碼:</td><td><input type="password" v-model.trim="pwd" value="" /></td></tr> <!-- <tr><td>驗(yàn)證碼:</td><td><input type="text" name="" value="" style="width:80px;"/></td></tr> --> <tr class="bt" align="center"><td> <input type="submit" @click="login" value="登陸" /></td><td> </td></tr> </table> </td> <td rowspan="5"> </td> </tr> <tr><td colspan="3"> </td></tr> </table> </td> </tr> <tr id="login_bot"><td colspan="2"><p>Copyright © 2017-{{getNowDate()}} Tujiawang</p></td></tr> </table> </div> </template> <script> import axios from 'axios' axios.defaults.withCredentials = true export default{ data(){ return { username:'', pwd:'' } }, methods: { login() { var params = new URLSearchParams(); params.append('username', this.username); params.append('password', this.pwd); axios.post(this.HOST+'/home/system/login',params).then(res => { if(res.data.code ==1){ sessionStorage.username = this.username; this.$router.push({path:'/main'}) }else{ alert('登錄失敗') } }) }, getNowDate(){ var d = new Date(); return d.getFullYear(); } } } </script>
上面的登錄頁面注意:login方法中登錄成功需要寫入sessionStorage以便路由進(jìn)行判斷
最主要的是路由文件中的內(nèi)容:
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const routes = [ { path: '/', redirect: '/login' }, { path: '/login', name: 'login', component: (resolve)=>{require(['../components/Login'],resolve)} }, { path: '/main', name: 'main', component: (resolve)=>{require(['../components/Home'],resolve)}, redirect: 'main/info', children: [{ path: 'info', meta: { id:-1 }, component: (resolve)=>{require(['../components/Main'],resolve)} } ] }, { path: '/vips', name: 'vips', component: (resolve)=>{require(['../components/Home'],resolve)}, redirect: 'vips/list', children: [{ path: 'list', meta: { id:0 }, component: (resolve)=>{require(['../components/VipsList'],resolve)} }, { path: 'detail', meta: { id:0 }, component: (resolve)=>{require(['../components/VipsDetail'],resolve)} }, { path: 'userlog', meta: { id:0 }, component: (resolve)=>{require(['../components/UserLog'],resolve)} } ] } ]; const router = new Router({ routes }); /** * to:表示目標(biāo)路由 * from:表示來源路由 * next:表示執(zhí)行下一步操作 */ router.beforeEach((to, from, next) => { if (to.path === '/login') { // 當(dāng)路由為login時就直接下一步操作 next(); } else { // 否則就需要判斷 if(sessionStorage.username){ // 如果有用戶名就進(jìn)行下一步操作 next() }else{ next({path: '/login'}) // 沒有用戶名就跳轉(zhuǎn)到login頁面 } } }) export default router
目前這個只是簡單的處理,這種方法官方叫做路由守衛(wèi),還有一種寫法就是在meta中添加是否需要登錄的控制,在beforeEach中來判斷,和上面方法一樣的。
希望本文所述對大家vue.js程序設(shè)計有所幫助。
- Vue.js實(shí)現(xiàn)一個SPA登錄頁面的過程【推薦】
- vue.js實(shí)現(xiàn)用戶評論、登錄、注冊、及修改信息功能
- Vue.js使用$.ajax和vue-resource實(shí)現(xiàn)OAuth的注冊、登錄、注銷和API調(diào)用
- 使用Vue.js和Element-UI做一個簡單登錄頁面的實(shí)例
- 基于 Vue.js 2.0 酷炫自適應(yīng)背景視頻登錄頁面實(shí)現(xiàn)方式
- Vue.js實(shí)現(xiàn)可配置的登錄表單代碼詳解
- Vue學(xué)習(xí)之路之登錄注冊實(shí)例代碼
- vue路由跳轉(zhuǎn)時判斷用戶是否登錄功能的實(shí)現(xiàn)
- 詳解Vuex管理登錄狀態(tài)
- Vue中保存用戶登錄狀態(tài)實(shí)例代碼
相關(guān)文章
vue?element-plus圖片預(yù)覽實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue?element-plus圖片預(yù)覽實(shí)現(xiàn)的相關(guān)資料,最近的項(xiàng)目中有圖片預(yù)覽的場景,也是踩了一些坑,在這里總結(jié)一下,需要的朋友可以參考下2023-07-07Vue中調(diào)用組件使用kebab-case短橫線命名法和使用大駝峰的區(qū)別詳解
這篇文章主要介紹了Vue中調(diào)用組件使用kebab-case(短橫線)命名法和使用大駝峰的區(qū)別,通過實(shí)例可以看出如果是在html中使用組件,那么就不能用大駝峰式寫法,如果是在.vue?文件中就可以,需要的朋友可以參考下2023-10-10Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題
這篇文章主要介紹了Vue-admin-template?添加、跳轉(zhuǎn)子頁面問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10