vue前后端分离单点登录,结合长token和短token进行登录_vue单点登录(1)

前端框架

前端框架太多了,真的学不动了,别慌,其实对于前端的三大马车,Angular、React、Vue 只要把其中一种框架学明白,底层原理实现,其他两个学起来不会很吃力,这也取决于你以后就职的公司要求你会哪一个框架了,当然,会的越多越好,但是往往每个人的时间是有限的,对于自学的学生,或者即将面试找工作的人,当然要选择一门框架深挖原理。

以 Vue 为例,我整理了如下的面试题。

Vue部分截图

如果你觉得对你有帮助,可以戳这里获取:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

            }else{
              this.loginMessage = msg
              this.$message({
              message: msg,
              type: 'error'
            });
          }
          //提交完
          this.subState = false
        
        }).catch(err=>{
          // 进度条结束
          this.subState =  false //提交完
          // this.loginMessage = "系统繁忙,请稍后重试"
        })
      }
    });
  },
  // 提交注册
  async regSubmit() {
    //如果在登陆中不允许登录
    if(this.subState){
      return false
    }
    // if( !isvalidUsername(this.registerData.username) ) {
    // this.regMessage = '请输入4-30位用户名, 中文、数字、字母和下划线'
    // return false
    // }
    // 校验用户名是否存在
    const { code, message, data } = await getUserByUsername(this.registerData.username)
    // 不为 20000,则后台校验用户名有问题
    if( code !== 20000 ) {
      this.regMessage = message
      return false
    }
    if( data ) { // data是 true 已被注册,false未被注册
      this.regMessage = '用户名已被注册,请重新输入用户名'
      return false
    }
    if (this.registerData.password.length < 6 ||
      this.registerData.password.length > 30) {
      this.regMessage = '请输入6-30位密码,区分大小写且不可有空格'
      return false
    }
    if (this.registerData.password !== this.registerData.repPassword) {
      this.regMessage = '两次输入密码不一致'
      return false
    }
    if (!this.registerData.check) {
      this.regMessage = '请阅读并同意用户协议'
      return false
    }
    this.subState = true // 提交中

    // 提交注册
    register(this.registerData).then(response =>{
      this.subState = false
      const {code,message} = response
      if(code === 20000) {
        // 注册成功,切换登录页
        this.$message({
          message: '恭喜你,注册成功',
          type: 'success'
        });
        setTimeout(() => {
          this.changetab(1)
        }, 1000);
      }else {
        this.regMessage = message
      }
    }).catch(error => {
      this.subState = false
      this.regMessage = '系统繁忙,请稍后重试'
    })
  }
},

}


3. 创建底部区域



{{this.$store.state.auth.basicInformation.title}}

4. 创建布局组件




5. app.vue路由渲染入口




### 登录&注册组件与路由配置



import Vue from ‘vue’
import Router from “vue-router”
import store from “@/store”
Vue.use(Router)

const router = new Router({
mode:“history”,
base:“customer-login-web”,
routes:[
{
path: ‘/’,
component: ()=> import(‘@/components/layout’),
children: [
{
path: ‘’,
component: ()=> import(‘@/views/auth/login’),
}
]
},
// 刷新组件路由配置
{
path: ‘/refresh’,
component: ()=> import(‘@/components/layout’),
children: [
{
path: ‘’,
component: ()=> import(‘@/views/auth/refresh’),
}
]
}
]
})
//路由拦截
router.beforeEach((to,from,next)=>{
console.log(“to.path”,to.path)
if(to.path === ‘/logout’){
//退出
store.dispatch(‘UserLoginOut’, to.query.redirectURL)
}else{
next()
}
})

export default router


在 /src/main.js 将 router 路由对象添加到 Vue实例中,顺便把Vuex状态管理  
 store/index.js 也添加中Vue实例中。



import Vue from ‘vue’
import App from ‘./App.vue’
import router from “./router” // ++++
import store from ‘./store’ // ++++
Vue.config.productionTip = false
new Vue({
router, // ++++
store, // ++++
render: h => h(App),
}).$mount(‘#app’)


### 封装Axios与Mock数据


整合 Axios,/src/utils/request.js



import axios from ‘axios’

const service = axios.create({
// .env.development 和 .env.productiont
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
withCredentials: true,//携带身份认证文件(cookie)
timeout: 10000 // request timeout
})

// 请求拦截器
service.interceptors.request.use(
config => {
return config
},
error => {
return Promise.reject(error)
}
)

// 响应拦截器
service.interceptors.response.use(
response => {
// 正常响应
const res = response.data
return res
},
error => {
// 响应异常
return Promise.reject(error)
}
)

export default service


### 对接 Mock.js 模拟数据接口


官网:https://www.easy-mock.com/ 服务器不稳定,访问不了  
 文档:https://www.easy-mock.com/docs  
 看文档自己添加接口【登录接口,登出接口】


### 登录功能实现


![SSO登录系统实现](https://img-blog.csdnimg.cn/c038caffdbb8457f821fb4389f641a39.png)


1. 门户客户端要求登陆时,输入用户名密码,认证客户端提交数据给认证服务器。
2. 认证服务器校验用户名密码是否合法,合法相应用户基本令牌userInfo,访问令牌 access\_token 、刷新令  
 牌 refresh\_token。不合法响应错误信息。


### 定义 Api 调用登录接口


登录时,要在请求头带上客户端ID和客户端密码,并且在请求头指定数据格式。



import request from ‘@/utils/request’
// 数据格式
const headers = { ‘Content-Type’: ‘application/x-www-form-urlencoded’ }
// 请求头添加 Authorization: Basic client_id:client_secret
const auth = {
username: ‘mxg-blog-admin’, // client_id
password: ‘123456’ // client_secret
}
// 登录,获取 token 接口
export function login(data) {
return request({
headers,
auth,
url: /auth/login,
method: ‘post’,
params: data
})
}


### Vuex 登录信息状态管理


当登录成功后,后台响应的 userInfo、access\_token、refresh\_token 信息使用 Vuex 进行管理,并且将这些信息  
 保存到浏览器 Cookie 中。


1. 安装 js-cookie 和 vuex 模块.



npm install --save js-cookie vuex

2. 在 /src/store/index.js 创建 Vuex.Store 实例 ,导入 ./modules/auth.js 状态模块



import Vue from ‘vue’
import Vuex from ‘vuex’
import auth from ‘./modules/auth’ // auth 状态模块
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
auth
}
})
export default store


3. 检查 mengxuegu-auth-center/src/main.js 是否将 store 已添加到Vue 实例中。  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/3ff49e77434e4923b82010ab2d7472ed.png)
4. 创建认证状态模块文件 src/store/modules/auth.js 中添加对 userInfo、access\_token、refresh\_token 状  
 态的管理



import { login } from ‘@/api/auth’
import { PcCookie, Key } from ‘@/utils/cookie’ // 对 cookie 操作
// 定义状态,state必须是function
const state = {
userInfo: PcCookie.get(Key.userInfoKey)
? JSON.parse(PcCookie.get(Key.userInfoKey)) : null, // 用户信息对象
accessToken: PcCookie.get(Key.accessTokenKey), // 访问令牌字符串
refreshToken: PcCookie.get(Key.refreshTokenKey), // 刷新令牌字符串
}
// 改变状态值
const mutations = {
// 赋值用户状态
SET_USER_STATE (state, data) {
console.log(‘SET_USER_STATE’, data)
// 状态赋值
const { userInfo, access_token, refresh_token } = data
state.userInfo = userInfo
state.accessToken = access_token
state.refreshToken = refresh_token
// 保存到cookie中
PcCookie.set(Key.userInfoKey, userInfo)
PcCookie.set(Key.accessTokenKey, access_token)
PcCookie.set(Key.refreshTokenKey, refresh_token)
},
// 重置用户状态,退出和登录失败时用
RESET_USER_STATE (state) {
// 状态置空
state.userInfo = null
state.accessToken = null
state.refreshToken = null
// 移除cookie
PcCookie.remove(Key.userInfoKey)
PcCookie.remove(Key.accessTokenKey)
PcCookie.remove(Key.refreshTokenKey)
}
}
// 定义行为
const actions = {
// 登录操作 ++++++++++++++++++++++++++ 4.
UserLogin ({ commit }, userInfo) {
const { username, password } = userInfo
return new Promise((resolve, reject) => {
// 调用登录接口 /api/auth.js#login
login({ username: username.trim(), password: password }).then(response => {
// 获取响应值
const { code, data } = response
if(code === 20000) {
// 状态赋值
commit(‘SET_USER_STATE’, data)
}
resolve(response) // 不要少了
}).catch(error => {
// 重置状态
commit(‘RESET_USER_STATE’)
reject(error)
})
})
}
}
export default {
state,
mutations,
actions
}


查看 utils/cookie.js 设置了保存的时长与域,对应域设置在 .env.development 和 .env.production 文件里的



cookie保存的域名,utils/cookie.js 要用

VUE_APP_COOKIE_DOMAIN = ‘location’


### 提交登录触发 action


在登录页 src/views/auth/login.vue 的 created 生命钩子里获取redirectURL,是引发跳转到登录页的引发跳  
 转 URL ,登录成功后需要重定向回 redirectURL。



created() {
// 判断URL上是否带有redirectURL参数
if(this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …rectURL = this.route.query.redirectURL
}
},
methods: {
}


修改 src/views/auth/login.vue 的 loginSubmit 方法,触发 store/modules/auth.js 中的 UserLogin 进行登  
 录。并导入 @/utils/validate 正则表达式校验用户名是否合法。



import {isvalidUsername} from ‘@/utils/validate’ // 校验规则
export default {
methods: {
// 提交登录
loginSubmit() {
// 如果在登录中,不允许登录
if(this.subState) {
return false;
}
if(!isvalidUsername(this.loginData.username)) {
this.loginMessage = ‘请输入正确用户名’
return false
}
if (this.loginData.password.length < 6) {
this.loginMessage = ‘请输入正确的用户名或密码’;
return false;
}
this.subState = true // 提交中
// 提交登录 , 不要以 / 开头
this.$store.dispatch(‘UserLogin’, this.loginData).then((response) => {
const { code, message } = response
if(code === 20000) {
// 跳转回来源页面
window.location.href = this.redirectURL
}else {
this.loginMessage = message
}
this.subState = false // 提交完
}).catch(error => {
// 进度条结束
this.subState = false // 提交完
this.loginMessage = ‘系统繁忙,请稍后重试’
})
},
},


### 单点退出系统


所有应用系统退出,全部发送请求到当前认证中心进行处理,发送请求后台删除用户登录数据,并将 cookie 中的  
 用户数据清除。


### 退出系统需求分析


![在这里插入图片描述](https://img-blog.csdnimg.cn/c5b92bfb21864d7a8d8c9bd87ac63532.png)


### 定义 Vuex 退出行为


1. 在 src/store/modules/login.js 状态管理文件中的 actions 对象中添加调用 logout 退出api方法。退出成功  
 后回到登录页。



// 1. 导入 logout ,+++++++
import { login, logout } from ‘@/api/login’
// 定义行为
const actions = {
// 2. 退出,++++++
UserLogout({ state, commit }, redirectURL) {
// 调用退出接口, 上面不要忘记导入 logout 方法
logout(state.accessToken).then(() => {
// 重置状态
commit(‘RESET_USER_STATE’)
// // 退出后,重写向地址,如果没有传重写向到登录页 /
window.location.href = redirectURL || ‘/’
}).catch(() => {
// 重置状态
commit(‘RESET_USER_STATE’)
window.location.href = redirectURL || ‘/’
})
}
}


### 路由拦截器退出操作


应用系统访问 http://localhost:7000/logout?redirectURL=xxx 进行退出,我们添加路由前置拦截 /logout 路  
 由请求进行调用 UserLogout 进行退出操作。



import Vue from ‘vue’
import Router from ‘vue-router’
Vue.use(Router)
const router = new Router({
mode: ‘history’,
routes: [
{
path: ‘/’,
component: ()=> import(‘@/components/layout’),
children: [
{
path: ‘’,
component: ()=> import(‘@/views/auth/login’),
}
]
},
]
})
// 导入vuex状态对象store ++++++
import store from ‘@/store’
// 路由拦截器 ++++++
router.beforeEach((to, from , next) => {
if(to.path === ‘/logout’) {
// 退出
store.dispatch(‘UserLogout’, to.query.redirectURL)
}else {
next()
}
})
export default router


### 测试


访问:http://localhost:7000/logout?redirectURL=http://www.@jubo.com  
 查看:浏览器 cookie 没有值


### 刷新令牌获取新令牌


       当应用系统请求后台资源接口时,要在请求头带上 accessToken 去请求接口,如果 accessToken 有效,资源服务  
 器正常响应数据。  
        如果访问令牌 accessToken 过期,资源服务器会响应 401 状态码 。当应用系统接收到 401 状态码时,通过刷新令牌 refreshToken 获取去请求新令牌完成新的重新身份。  
 ![单点登录刷新令牌流程](https://img-blog.csdnimg.cn/93111589519b4da083e9ecbb49abf120.png)  
 ![单点登陆中刷新令牌获取新令牌流程图](https://img-blog.csdnimg.cn/fdac770beec84634a830417757e88af9.png)


### 创建刷新令牌组件


在认证前端 jubo-auth-center 创建一个刷新组件,用于接收应用系统发送请求到认证前端,进行刷新令牌重新身份认证。  
 刷新组件以弹窗方式:提示正在重新身份认证


1. 创建组件模板 jubo-auth-center/src/views/auth/refr




2. 添加模板样式




3. data选项中声明变量, created 钩子中获取重写向URL,和发送请求刷新身份




4. 添加刷新组件路由配置  
 在 jubo-auth-center/src/router/index.js 添加刷新组件的路由配置



const router = new Router({
mode: ‘history’,
routes: [
{
path: ‘/’,
component: ()=> import(‘@/components/layout’),
children: [
{
path: ‘’,
component: ()=> import(‘@/views/auth/login’),
}
]
},
// 刷新组件路由配置 +++++
{
path: ‘/refresh’,
component: ()=> import(‘@/components/layout’),
children: [
{
path: ‘’,
component: ()=> import(‘@/views/auth/refresh’),
}
]
}
]
})


5. 定义 Api 调用刷新令牌接口  
 添加调用 刷新令牌获取新令牌接口 API 方法,在 jubo-auth-center/src/api/auth.js



// 刷新令牌接口 ++++++++++++++++++++++++++
export function refreshToken (refreshToken) {
return request({
headers,
auth,
url: /auth/user/refreshToken,
method: ‘get’,
params: {
refreshToken
}
})
}


6. Vuex 发送请求与重置状态  
 store/modules/login.js 添加如下代码,导入 refreshToke,actions 中 添加发送刷新令牌请求 行为。



// 1. 导入 refreshToken +++++
import { login, logout, refreshToken } from ‘@/api/auth’
import { PcCookie, Key } from ‘@/utils/cookie’ // 对 cookie 操作
// 省略。。。
// 定义行为
const actions = {
// 2. 发送刷新令牌 ++++++++++++
SendRefreshToken({ state, commit }) {
return new Promise((resolve, reject) => {
// 判断是否有刷新令牌
if(!state.refreshToken) {
commit(‘RESET_USER_STATE’)
reject(‘没有刷新令牌’)
return
}
// 发送刷新请求
refreshToken(state.refreshToken).then(response => {
// console.log(‘刷新令牌新数据’, response)
// 更新用户状态新数据
commit(‘SET_USER_STATE’, response.data)
resolve() // 正常响应钩子
}).catch(error => {
// 重置状态
commit(‘RESET_USER_STATE’)
reject(error)
})
})
},
}

文末

逆水行舟不进则退,所以大家要有危机意识。

同样是干到35岁,普通人写业务代码划水,榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说35岁是程序员的门槛,很多人迈不过去,其实各行各业都是这样都会有个坎,公司永远都缺的高级人才,只用这样才能在大风大浪过后,依然闪耀不被公司淘汰不被社会淘汰。

为了帮助大家更好温习重点知识、更高效的准备面试,特别整理了《前端工程师核心知识笔记》电子稿文件。

内容包括html,css,JavaScript,ES6,计算机网络,浏览器,工程化,模块化,Node.js,框架,数据结构,性能优化,项目等等。

269页《前端大厂面试宝典》

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目,涵盖了初中级前端技术点。

开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端面试题汇总

  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Spring Boot和Vue.js是两个非常流行的技术栈,可以非常好地实现前后端分离的开发模式。Security和JWT是两个很好的工具,可以帮助我们实现安全的登录和授权机制。 以下是实现Spring Boot和Vue.js前后端分离的步骤: 1.创建Spring Boot工程 首先,我们需要创建一个Spring Boot工程,可以使用Spring Initializr来生成一个基本的Maven项目,添加所需的依赖项,包括Spring Security和JWT。 2.配置Spring Security 在Spring Security中,我们需要定义一个安全配置类,该类将定义我们的安全策略和JWT的配置。在这里,我们可以使用注解来定义我们的安全策略,如@PreAuthorize和@Secured。 3.实现JWT JWT是一种基于令牌的身份验证机制,它使用JSON Web Token来传递安全信息。在我们的应用程序中,我们需要实现JWT的生成和验证机制,以便我们可以安全地登录和授权。 4.配置Vue.js 在Vue.js中,我们需要创建一个Vue.js项目,并使用Vue CLI来安装和配置我们的项目。我们需要使用Vue Router来定义我们的路由,并使用Axios来发送HTTP请求。 5.实现登录和授权 最后,我们需要实现登录和授权机制,以便用户可以安全地登录和访问我们的应用程序。在Vue.js中,我们可以使用Vue Router和Axios来发送HTTP请求,并在Spring Boot中使用JWT来验证用户身份。 总结 以上是实现Spring Boot和Vue.js前后端分离的步骤,我们可以使用Security和JWT来实现安全的登录和授权机制。这种开发模式可以让我们更好地实现前后端分离,提高我们的开发效率和应用程序的安全性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值