Vue注冊模塊與登錄狀態(tài)的持久化實現(xiàn)方法詳解

第Vue注冊模塊與登錄狀態(tài)的持久化實現(xiàn)方法詳解目錄整體框架1.前端頁面授權(quán)2.實現(xiàn)注冊頁面3.實現(xiàn)登錄狀態(tài)的持久化優(yōu)化前端

整體框架

1.前端頁面授權(quán)

當(dāng)我們登錄網(wǎng)站的時候，如果沒有登錄，強(qiáng)制讓用戶重定向到登錄界面

在router目錄下的index.js文件下實現(xiàn)。router-index.js

importstorefrom'../store/index'

//把一些額外信息放到一個額外的域里面，meta信息里面存一下是否要授權(quán)，如果需要授權(quán)而且沒有登錄，重定向到登錄頁面，重定向到登錄界面。

constroutes=[

path:"/",

name:"home",

redirect:"/pk/",

meta:{

requestAuth:true,

path:"/pk/",

name:"pk_index",

component:PkIndexView,

meta:{

requestAuth:true,

path:"/record/",

name:"record_index",

component:RecordIndexView,

meta:{

requestAuth:true,

path:"/ranklist/",

name:"ranklist_index",

component:RanklistIndexView,

meta:{

requestAuth:true,

path:"/user/bot/",

name:"user_bot_index",

component:UserBotIndexView,

meta:{

requestAuth:true,

path:"/user/account/login",

name:"user_account_login",

component:UserAccountLoginView,

meta:{

requestAuth:false,

path:"/user/account/register",

name:"user_account_register",

component:UserAccountRegisterView,

meta:{

requestAuth:false,

path:"/404/",

name:"404",

component:NotFound,

meta:{

requestAuth:false,

path:"/:catchAll(.*)",

redirect:"/404/",

//to跳轉(zhuǎn)到哪個頁面，from表示從哪個頁面跳轉(zhuǎn)過去

//next的表示將頁面要不要執(zhí)行下一步操作，寫之前首先要記錄每一個未授權(quán)界面

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

if(to.meta.requestAuth!store.state.user.is_login){

next({name:"user_account_login"})；

}else{

next();

})

最終實現(xiàn)效果：如果處于未登錄狀態(tài)，點(diǎn)擊除注冊之外的按鈕頁面會跳轉(zhuǎn)到登錄界面。

2.實現(xiàn)注冊頁面

在view-user-account下的UserAccountRegisterView.vue文件實現(xiàn)，實現(xiàn)方式類似于同目錄下的UserAccountLoginView.vue

可以直接把登錄頁面的樣式復(fù)制過來再做修改。

template

ContentField

div

div

form@submit.prevent="register"

div

labelfor="username"用戶名/label

inputv-model="username"type="text"id="username"placeholder="請輸入用戶名"

/div

div

labelfor="password"密碼/label

inputv-model="password"type="password"id="password"placeholder="請輸入密碼"

/div

div

labelfor="confirmedpassword"密碼/label

inputv-model="confirmedpassword"type="password"id="confirmedpassword"placeholder="請再次輸入密碼"

/div

div{{error_message}}/div

buttontype="submit"提交/button

/form

/div

/div

/ContentField

/template

script

importContentFieldfrom'../../../components/ContentField.vue'

import{ref}from'vue'

importrouterfrom'../../../router/index'

import$from'jquery'

exportdefault{

components:{

ContentField

setup(){

letusername=ref('');

letpassword=ref('');

letconfirmedPassword=ref('');

leterror_message=ref('');

constregister=()={

$.ajax({

url:":8080/user/account/register/",

type:"post",

data:{

username:username.value,

password:password.value,

confirmedPassword:confirmedPassword.value,

success(resp){

//成功直接返回登錄界面

if(resp.error_message==="success"){

router.push({name:"user_account_login"});

}else{

error_message.value=resp.error_message;

return{

username,

password,

confirmedPassword,

error_message,

register,

/script

stylescoped

button{

width:100%;

div.error-message{

color:red;

justify-content:center;

/style

實現(xiàn)效果圖：

在測試的時候可以會遇到不輸入密碼也可以注冊成功的bug，在RegisterServiceImpl.java下修改一下就可以了。

3.實現(xiàn)登錄狀態(tài)的持久化

當(dāng)我們的用戶重定向到登陸頁面的時候，我們需要把用戶的token存儲到瀏覽器的localstorage，這樣就可以實現(xiàn)登錄狀態(tài)持久化。

首先修改store目錄下的-user.js文件，在合適的位置添加下列兩行。

localStorage.setItem("jwt_token",resp.token);

localStorage.removeItem("jwt_token");

其次修改view-user-account下的UserAccountLoginView.vue文件

script

importContentFieldfrom'../../../components/ContentField.vue'

import{useStore}from'vuex'

import{ref}from'vue'

importrouterfrom'../../../router/index'

exportdefault{

components:{

ContentField

setup(){

conststore=useStore();

letusername=ref('');

letpassword=ref('');

leterror_message=ref('');

constjwt_token=localStorage.getItem("jwt_token");

if(jwt_token){

mit("updateToken",jwt_token);

store.dispatch("getinfo",{

success(){

router.push({name:"home"});

error(){

}else{

constlogin=()={

error_message.value="";

store.dispatch("login",{

username:username.value,

password:password.value,

success(){

store.dispatch("getinfo",{

success(){

router.push({name:'home'});

console.log(store.state.user);

error(){

error_message.value="用戶名或密碼錯誤";

return{

username,

password,

error_message,

login,

/script

優(yōu)化前端

在實現(xiàn)前端登錄狀態(tài)持久化之后，刷新頁面可能會存在明顯的轉(zhuǎn)換，所以下面對前端頁面進(jìn)行優(yōu)化。

首先在store目錄下的user.js中添加全局變量和下拉函數(shù)。

state:{

id:"",

username:"",

password:"",

photo:"",

token:"",

is_login:false,

pulling_info:true,//是否正在拉取信息

mutations:{

updateUser(state,user){

state.id=user.id;

state.username=user.username;

state.photo=user.photo;

state.is_login=user.is_login;

updateToken(state,token){

state.token=token;

logout(state){

state.id="";

state.username="";

state.photo="";

state.token="";

state.is_login=false;

updatePullingInfo(state,pulling_info){

state.pulling_info=pulling_info;

其次修改UserAccountLoginView.vue

template

ContentFieldv-if="!$store.state.user.pulling_info"

div

div

form@submit.prevent="login"

div

labelfor="username"用戶名/label

inputv-model="username"type="text"id="username"placeholder="請輸入用戶名"

/div

div

labelfor="password"密碼/label

inputv-model="password"type="password"id="password"placeholder="請輸入密碼"

/div

div{{error_message}}/div

buttontype="submit"提交/button

/form

/div

/div

/ContentField

/template

script

setup(){

conststore=useStore();

letusername=ref('');

letpassword=ref('');

leterror