前提參考：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)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。