1. 論文網站登錄注冊怎麼實現
論文網站的登錄注冊和其他網站都是大同小異的。今天就談談怎麼實現的吧首先我們看登錄邏輯
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信息並跳轉到登錄頁面
在前端中，登錄注冊需要通過埠來獲取數據並傳遞參數，並進行判斷事件的執行獲取得到的登錄信息以及一個token值
token是服務端生成的一串字元串，以作客戶端進行請求的一個令牌,
它相當於數據的id，給與數據一個唯一的標識，它的出現主要目的是解決伺服器頻繁請求用戶姓名以及密碼的問題；
它的作用是減輕伺服器的壓力，減少頻繁的查詢資料庫，使伺服器更加健壯。
// 請求登錄介面並傳遞參數
this.$ClientAPI
.loginGetToken(obj)
.then((res) => {
console.log(res.data.data);
var token = res.data.data.remember_token; //讀取token
var mobile = res.data.data.mobile;
localStorage.setItem("mobile", mobile);
localStorage.setItem("token", token); //保存token
localStorage.setItem("value", "admin");
Toast.success({
message: "登錄成功",
position: "top",
});
this.$router.push("/mine"); //跳轉到我的頁面
})
.catch((err) => {
console.log(err);
Toast.fail({
message: "登錄失敗",
position: "top",
});
2. 前端判斷用戶登錄狀態方法
方法一：
登錄成功後，後端返回一個 cookie，根據這個 cookie 的有無來判斷；退出登錄時，後端會刪除這個 cookie；
方法二：
登錄成功後，前端設置 cookie，比如'isLogin = true'，根據isLogin的值去判斷；退出登錄時刪除 cookieisLogin或設置 'isLogin = false'。
方法三：
1、前端發送登錄請求
2、後端返回 token，前端得到後端返回的 token，將其寫入到 localStorage（或sesstionStorage） 中，後續請求中都攜帶 token
3、後端判斷 token 是否過期，如果過期就對前台的請求響應過期標識或者狀態碼
4、前端得到過期標識後，清除 localStorage（或sesstionStorage）中的 token，然後重定向到 login 路由
以上這是我知道的三種方法，最常用的是第三種，如果誰還有其他的判斷方法，歡迎在下方留言。
3. 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');