vue项目实现用户登录 以及携带token
调取登录接口 （首先明确一下要做到事情）
在前后端完全分离的情况下，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信息并跳转到登录页面
8.调取登录接口成功，会在回调函数中将token存储到localStorage和vuex中
image.png
一、前期准备
页面模板
<template>
<div class="loginContainer">
<h1>登录</h1>
<div>
姓名：
<input
class="inputStyle"
id="username"
type="text"
name="username"
v-model="username"
/><br />密码：
<input
class="inputStyle"
id="password"
type="password"
name="pwd"
v-model="password"
/><br />
<button class="loginStyle" id="loginBtn" @click="handleLogin">
登录
</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: "",
password: "",
};
},
methods: {
handleLogin() {
// 可以直接调用 fetchLogin ？
// token
this.$store
.dispatch("login", {
username: this.username,
password: this.password,
})
.then(() => {
this.$router.push({
name: "photo",
});
});
},
},
};
</script>
<style scoped>
.loginContainer {
margin: 0 auto;
width: 600px;
text-align: center;
padding-top: 20px;
padding-bottom: 50px;
border: 1px solid;
}
.loginContainer input {
margin-bottom: 20px;
}
.loginStyle {
width: 160px;
height: 40px;
background: rgb(50, 203, 77);
color: white;
font-size: 17px;
}
.inputStyle {
width: 200px;
height: 30px;
padding: 5px;
outline: none;
}
.inputStyle:focus {
border: 1px solid rgb(50, 203, 77);
}
form {
position: relative;
}
.exchange {
position: absolute;
top: 8px;
right: 65px;
color: red;
}
</style>
逻辑实现
export default {
data() {
return {
loginForm: {
username: "",
password: "",
},
};
},
methods: {
...mapMutations(["changeLogin"]),
login() {
let _this = this;
/////判读账号密码是否输入，没有则alert 出来
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);
});
}
},
},
};
image.png
2.在store文件夹下的index.js 添加 token
import Vuex from "vuex";
import Vue from "vue";
import { fetchLogin, fetchPhotos } from "../api";
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
token: localStorage.getItem("token") || "",
photos: [],
pageSize: 5,
pageTotal: 10,
},
getters: {
getPhotoItemById(state) {
// this.$store.getters.getPhotoItemById()
return (id) => {
return state.photos.find((photo) => {
return photo.id == id;
});
};
},
},
mutations: {
login(state, payload) {
state.token = payload.token;
// 持久化保存 token
// 方便下次获取
localStorage.setItem("token", payload.token);
},
logout(state) {
state.token = "";
localStorage.removeItem("token");
},
updatePhotos(state, payload) {
console.log(payload);
state.photos = payload.photos;
},
updatePageInfo(state, payload) {
state.pageSize = payload.prepage;
state.pageTotal = payload.total;
console.log(state);
},
},
actions: {
login({ commit }, payload) {
// 异步的
// action 支持返回 promise
const { username, password } = payload;
return fetchLogin({ username, password }).then((res) => {
commit("login", {
token: res.data.data.token,
});
});
},
updatePhotos({ commit }, payload) {
const { p } = payload;
return fetchPhotos(p).then((res) => {
console.log(res.data);
commit("updatePhotos", {
photos: res.data.data.photos,
});
const { prepage, total } = res.data.data.page;
commit("updatePageInfo", {
prepage,
total,
});
});
},
},
});
export default store;
二，配置 路由导航守卫
router文件夹下的index.js
import VueRouter from "vue-router";
import Vue from "vue";
import Photo from "../view/Photo.vue";
import Login from "../view/Login.vue";
import Detail from "../view/Detail.vue";
import store from "../store";
// 插件使用
Vue.use(VueRouter);
const router = new VueRouter({
mode: "history",
routes: [
{
path: "/",
redirect: "/photo",
},
{
path: "/photo",
name: "photo",
component: Photo,
meta: {
requireAuth: true,
},
},
{
path: "/login",
name: "login",
component: Login,
},
{
path: "/detail/:id",
name: "detail",
component: Detail,
props: true,
},
],
});
// 导航守卫
// 提前检测有没有 token
router.beforeEach((to, from, next) => {
// 当你访问 login 页面的时候 需要拦截吗？
// photo 页面的时候 才需要拦截
if (to.meta.requireAuth) {
// 看看 store 里面有没有 token
if (store.state.token) {
next();
} else {
next({
name: "login",
});
}
} else {
next();
}
});
export default router;
三、请求头加token 在 main.js中添加
// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use( config => {
if (localStorage.getItem('Authorization'))
{
config.headers.Authorization = localStorage.getItem('Authorization');
}
return config; },
error => { return Promise.reject(error);
});
token的过期可以自定义
四、如果前端拿到状态码为401，就清除token信息并跳转到登录页面
localStorage.removeItem('Authorization'); this.$router.push('/login');
五、退出功能，就是清楚token就退出了,然后commit一个方法this.$store.commit("logout")
触发这个logout方法
<template>
<div id="app">
<div>
<el-button @click="handleLogout">logout</el-button>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "App",
components: {},
created() {},
methods: {
handleLogout() {
this.$store.commit("logout");
this.$router.push({
name: "login",
});
},
},
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
2.在store里面的index.js文件,清楚token
logout(state) {
state.token = "";
localStorage.removeItem("token");
},
