实际开发中，关于单点登录之前后端结合

原谅我很悲

已于 2022-06-09 11:04:34 修改

阅读量1.9k

点赞数 2

分类专栏： # 前端文章标签：前端 vue

于 2022-05-05 11:36:20 首次发布

本文链接：https://blog.csdn.net/weixin_44224921/article/details/124584475

版权

前端专栏收录该内容

42 篇文章 1 订阅

订阅专栏

实际开发中，关于单点登录之前后端结合

单点登录系统：SSO(Single Sign On),说得简单点就是在一个多系统共存的环境下，用户在一处登录后，就不用在其他系统中登录，也就是用户的一次登录能得到其他所有系统的信任。单点登录在大型网站里使用得非常频繁，例如像阿里巴巴这样的网站，在网站的背后是成百上千的子系统，用户一次操作或交易可能涉及到几十个子系统的协作，如果每个子系统都需要用户认证，不仅用户会疯掉，各子系统也会为这种重复认证授权的逻辑搞疯掉。实现单点登录说到底就是要解决如何产生和存储那个信任，再就是其他系统如何验证这个信任的有效性，因此要点也就以下两个：

存储信任
验证信任

单点登录的实现就是将之前的前后分离MVVM模式，变为前后结合MVC模式，具体代码实现如下

这里采用的实现单点登录的方式是：前后结合

一、将之前路由重定向到登录页面，改成路由重定向到首页

const routes = [
  {
    path: "",
    redirect: "/index",
    meta: { requireAuth: true },
  },
  // {
  //   // 公众区（登录页）
  //   path: "/login",
  //   name: "Login",
  //   component: Login,
  //   meta: { requireAuth: false },
  // },
  {
    // 首页
    path: "/index",
    name: "Index",
    component: () => import("@/views/Index.vue"),
    meta: { requireAuth: true },
  },
];

二、重新编辑登录页面html文件，并发给后端

登录页面样式一样，只是vue文件，变为html文件，并交给后端人员部署到后台上

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录</title>
<style>
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
body {
    background: url(img/bg.png) no-repeat center 0px fixed;
    background-size: cover;
    font-family: "微软雅黑", sans-serif;
}
.login { 
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -150px 0 0 -150px;
    width:300px;
    height:300px;
}
.login h1 { 
    color:#555555;
    text-shadow: 0px 10px 10px #CDC673;
    letter-spacing:2px;text-align:center;
    margin-bottom:20px;
}
input{
    padding:10px;
    width:100%;
    color:white;
    margin-bottom:10px;
    background-color:#555555;
    border: 1px solid black;
    border-radius:5px;
    letter-spacing:2px;
}
form button{
    width:100%;
    padding:10px;
    margin-bottom:10px;
    background-color:#CDC673;
    border:1px solid black;
    border-radius:5px;
    cursor:pointer; 
}                                                                                                                                       
</style>
</head>
<body>
<div class="login">
    <h1>单点登录系统</h1>
  	<!-- 这块必须是表单元素，配置属性不要变 -->
   <form action="/login" method="post">
    <input type="text" name="username" placeholder="用户名" required="required">
    <input type="password" name="password" placeholder="密  码" required="required">
    <button type="submit">登录</button>
  </form>
</div>
</body>
</html>

三、在首页中，请求用户信息接口，并将用户信息保存到Vuex

1、请求用户信息

async created() {
    const res = await get(this.userUrl);
    const nickname = res.data.nickname;
    const avatar = res.data.avatar;
    this.$store.commit("user/setUser", res.data);
    // localStorage.setItem("nickname", nickname);
    // localStorage.setItem("avatar", avatar);
 },

2、 Vuex保存用户信息，并实现持久化

在user.js文件中

const state = {
  userDesc: {}
};
const mutations = {
  setUser(state, value) {
    state.userDesc = value
  }
};
export default {
  namespaced: true,
  state,
  mutations,
};

在store/index.js中

import Vue from "vue";
import Vuex from "vuex";
// vux数据持久化
import createPersistedState from "vuex-persistedstate"
import user from "./modules/user";
Vue.use(Vuex);
export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {
    user,
  },
  // 使用插件  让vuex数据持久化
  plugins: [createPersistedState({
    // 默认让vuex所有数据持久化
    storage: window.localStorage
  })]
});

四、封装axios，实现401状态码，页面重定向

import axios from "axios";
const $http = axios.create({
    baseURL: './',  // 这个目录要和后端沟通决定
    timeout: 5000
})
$http.interceptors.response.use(res => {
    if (res.status === 401) {
        // 响应401，跳转登录页
        // window.location.replace('/login.html')
        location.href = '/login.html'   // 这个路径要和后端沟通决定
    }
    return res
}, err => {
    return Promise.reject(err)
})
export default $http;