vue实现登录功能
4.客户端收到Token以后可以把它存储起来,比如放在Cookie里或者localStorage里。\6.服务端收到请求,然后去验证客户端请求里面带着的Token,如果验证成功,就向客户端返回请求的数据。\3.验证成功后,服务端会签发一个Token,再把这个Token发送给客户端。\5.客户端每次向服务端请求资源的时候需要带着服务端签发的Token。\2.服务端收到请求,去验证用户名与密码。\1.
·
思路–使用基于token的登录流程
使用基于Token 的身份验证方法,大概的流程是这样的:
\1. 客户端使用用户名跟密码请求登录
\2. 服务端收到请求,去验证用户名与密码
\3. 验证成功后,服务端会签发一个Token,再把这个 Token 发送给客户端
\4. 客户端收到Token 以后可以把它存储起来,比如放在 Cookie 里或者 localStorage 里
\5. 客户端每次向服务端请求资源的时候需要带着服务端签发的Token
\6. 服务端收到请求,然后去验证客户端请求里面带着的Token,如果验证成功,就向客户端返回请求的数据
//在点击登录按钮验证表单的方法里:
// 表单验证的代码方法
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// ------第一步:客户端使用用户名跟密码请求登录------
loginApi(this.loginData).then((result) => {
console.log(result);
if (result.data.status == 200) {
//------第二步:客户端收到Token 以后可以把它存储起来在cookie里------
// 设置cookie
setCookie("token", result.data.token);
// 跳转到layout/userlist
this.$router.push("/layout/userlist");
} else {
alert(result.data.msg);
}
});
} else {
console.log("error submit!!");
return false;
}
});
},
//第三步:------客户端每次向服务端请求资源的时候需要带着服务端签发的Token------
在utils--request.js中使用axios的拦截机
import axios from "axios";
import { getCookie } from "@/utils/auth.js"
let service = axios.create({
baseURL: "http://localhost:3000/api",
timeout: 5000
})
// 拦截请求
service.interceptors.request.use(config => {
let token = getCookie(token); //获取token
//将token放入到请求头中
if (token) {
config.headers.token = token;
}
return config;
})
// 拦截响应
// service.interceptors.response
export default service;
js-cookie模块实现存储token
cnpm install js-cookie --save
src–utils–auth.js
import Cookies from "js-cookie";
// 创建cookie
export let setCookie = (key, value) => {
Cookies.set(key, value, { expires: 1 });
}
// 获取cookie
export let getCookie = (key) => {
return Cookies.get(key);
}
// 删除cookie
判断是否是用户已经登录了
使用vue-router的路由守卫
//全局前置路由守卫
import Vue from 'vue'
import VueRouter from 'vue-router'
// 引入模块化的路由
import { userRouter } from "@/router/modules/users.js"
import { productRouter } from "@/router/modules/product.js"
// 引入获取token的getCookie的方法
import { getCookie } from "@/utils/auth.js"
Vue.use(VueRouter);
const routes = [{
path: '/',
redirect: "/login"
},
{
path: '/login',
name: 'login', //命名路由
component: () => import("@/views/UserLogin/UserLogin.vue")
},
{
path: '/register',
name: 'register',
component: () => import("@/views/UserRegister/UserRegister.vue")
},
// 配置ElementUI路由
{
path: "/element",
component: () => import("@/views/ElementUI/ElementUI.vue")
},
// 配置嵌套路由
userRouter,
productRouter
]
const router = new VueRouter({
routes
})
// 路由守卫--全局前置守卫(先拦截所有路由,满足一定条件执行next方法,next方法是向下执行)
router.beforeEach((to, from, next) => {
// to:即将到达的路由 from:即将离开的路由 next:向下执行的方法
// console.log(to);
// console.log(from);
if (to.path == "/login") {
// 如果是登录页面,放行
next();
} else {
// 如果不是登录页面,验证token。如果有token,则执行next(),否则跳转到登录页面
let token = getCookie("token");
// console.log(token);
if (token) {
next();
}
if (!token) {
next("/login");
}
}
})
// 路由守卫--全局后置钩子(进入路由之后的操作)
// router.afterEach(() => {
// // console.log("666");
// })
export default router
更多推荐
已为社区贡献5条内容
所有评论(0)