vue项目实现登录(sessionStorage 存储 token)

前提参考：vue项目封装axios

思路：
// 1, 前端校验，校验成功后向后台传用户名和密码（每次请求接口都要传 token）
// 2，后端收到请求，验证用户名和密码，验证成功，生成 token 返回给前端
// 3，前端拿到token，将token存储到sessionStorage
// 4，跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面
// 5，后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401
// 6，如果前端拿到状态码为401/退出登录，就清除token信息并跳转到登录页面

request.js

//http request 拦截器
instance.interceptors.request.use(config => {let token = sessionStorage.getItem('token')if(token == null){// 首次登录config.headers.client_id = 'jeecp'config.headers.client_secret = 'webApp'}else{config.headers.Authorization = 'Bearer '+ token}return config},err => {return Promise.reject(err)}
)

api.js

// 登录loginInfor(Information){return post('/api-auth/oauth/user/token' ,{username: Information.username,password: Information.password,})},

登录前端页面

<template><el-container id="login"><el-aside width="70%"><p class="welcome">智能环境照明子系统欢迎您</p></el-aside><el-main><p>智能环境照明子系统</p><el-form ref="Form" :model="loginForms" :rules="loginRules" label-width="80px"><el-form-item prop="username"><el-input v-model="loginForms.username"><template slot="prepend"><i class="el-icon-user"></i></template></el-input></el-form-item><el-form-item prop="password"><el-input v-model="loginForms.password"><template slot="prepend"><i class="el-icon-goods"></i></template></el-input></el-form-item><el-button round @click.native.prevent="submit">登陆</el-button></el-form></el-main></el-container>
</template>
<style scoped>
#login{width: 100%;height: 100%;
}#login .el-aside{height: 100%;background-image: url('~@/assets/img/login_bg.png');position: relative;background-size: 100% 100%;background-repeat: no-repeat;
}
#login .el-aside .welcome{text-align: center;margin: 0 auto;position: absolute;top: 50%;transform: translateY(-50%);left: 49%;transform: translateX(-50%);font-size: 40px;color: #fff;
}
#login .el-main{padding: 0;background-color: rgba(77, 120, 223, 1);
}
#login .el-main p{color: #fff;font-size: 30px;margin-top: 45%;margin-bottom: 10%;
}#login .el-main .el-input-group{width: 70%;/* margin: 0 15% 30px 15%; */
}
#login .el-main .el-button{width: 35%;color: rgba(77, 120, 223, 1);
}
@media screen and (min-width: 1600px) and (max-width: 1920px) {#login .el-main p{margin-top: 67%;}
}
@media screen and (min-width: 1400px) and (max-width: 1600px) {#login .el-main p{margin-top: 65%;}
}
</style>
<style>
*{padding: 0;margin: 0;
}
</style>
<script>
import $ from "jquery"
export default {data (){return {loginForms:{username: 'fox',password: '123456'},loginRules: {username: [{ required: true, trigger: 'blur', message: '用户名不能为空' }],password: [{ required: true, trigger: 'blur', message: '密码不能为空' }]}}},mounted() {$('#app').height($(window).height())$('.el-form-item__content').css("margin-left", "0")},methods: {// 重置登录表单resetLoginForm() {this.$refs.Form.resetFields()},// 登录submit(){this.$router.push("/index");// 测试表单数据校验  Form  要和 表单的ref的名称一致this.$refs.Form.validate(valid => {// console.log('校验结果: ' + valid)if (!valid) {console.log("参数验证失败")return}// 校验成功this.$api.loginInfor(this.loginForms).then(res => {// console.log('请求结果：', res)if (res.code !== '000000') {// console.log("登录失败")return}else{console.log("token", res.data.access_token)// token放入 sessionStoragewindow.sessionStorage.setItem('token', res.data.access_token)// 跳转到首页this.$router.push({path: "/index"});}}).catch(err => {console.log(err)})})}}
}
</script>

路由 index.js

// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {// to 将要访问的路径// from 从哪里跳转来// next 放行//跳转到登录页面直接放行if (to.path === '/login') {next();} else {// 获取token,看是否有token,有token放行const token = window.sessionStorage.getItem("token")if (!token) {next('/login')return;} else{// 放行next();}}
});

vue项目实现登录(sessionStorage 存储 token)相关推荐

Vue项目之登录注册
Vue项目之登录注册 1. 注册 1.1 注册页面的布局 1.2 注册业务逻辑的实现 2. 登录 3.导航守卫 3.1全局导航守卫,全部路由都会经过这里.一定要调用next方法向下执行 3.2 路由独 ...
vue项目打包出错：Unexpected token arrow «=＞», expected punc «,» [static/js/chunk-1558f5a0.b64bfa00.js:626,2
vue项目打包出错:Unexpected token arrow «=>», expected punc «,» [static/js/chunk-1558f5a0.b64bfa00.js:62 ...
vue项目实现登录/退出功能（包括token机制）
源码地址:https://gitee.com/cheng-xuyuan/blogWeb.git(请忽略这句) 一.登录业务的相关技术点 http是无状态的,为记录登录状态可通过cookie-sessi ...
[Vue项目实战]登录功能实现
登录功能实现写在前面登录概述登录业务流程登录业务的相关技术点登录---token原理分析登录功能实现登录页面的布局在components文件下创建一个vue文件配置路由(并添加路由重 ...
Vue项目二登录注册功能的实现
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.系统注册功能的实现 1.配置注册页面路由 2.注册页面的搭建 3.api下发送ajax请求的文件创建二.后台数据 ...
Vue项目的登录和注册界面
登录界面,Login.vue <template><div class="login_container"><div class="logi ...
【Vue+axios】登录拦截验证token，路由拦截器
GitHub项目地址:https://github.com/superman66/vue-axios-github/tree/master/src router文件夹中的index.js添加路由权限校 ...
关于登录，存储token，验证本地token，请求头携带token。
1.为什么要使用token,token是什么? 官方回答: Token 是在服务端产生的.如果前端使用用户名/密码向服务端请求认证,服务端认证成功,那么在服务端会返回 Token 给前端.前端可以在每 ...
vue登录如何存储cookie_vue保持用户登录状态（各种token存储方式）
而作为前端,存储这些值同样有多种方式,你可以存在Cookie.LocalStorage.SessionStorage或者Vuex状态管理器中,当然他们的作用也不同怎么设置Cookie HttpRes ...

vue项目实现登录(sessionStorage 存储 token)

vue项目实现登录(sessionStorage 存储 token)相关推荐

最新文章

热门文章