有点复杂有点长，一定要耐心看，看完之后你会对单点登录有个神奇的看法。

你能学到的知识：1. layout布局 2.加载路由视图 3.封装路由以及路由拦截器使用 4.封装store auth验证模块 5.vue-router、vuex、js-cookie应用 6.什么叫sso单点登录

一、先介绍一下什么是单点登录？了解的同学可以直接跳过了~~~

1.为什么要用sso单点登录？

很多企业或者公司一开始的时候项目没有那么多，或许只有一两个，所以各自有各自的登录平台没啥关系，但是一旦到达一定规模后，单点登录显得尤为重要。在这里 举个栗子：淘宝、天猫、阿里云。一开始淘宝也是在本系统内进行登录注册的，但是当有了天猫，有了阿里巴巴之后，你登陆一个平台之后，另外几个平台再打开的时候会自动获取客户端存储的信息，然后验证是否登录，也就实现了单点登录。至于淘宝信息存在哪，有兴趣的可以自己去看看，这里不再赘述。

对了 这里有个小插曲，单点登录并不是说 两个网页同一个网站，这边登录后那边被顶下去了。这一定要注意~~~

2.单点登录的应用场景？

多个平台共用同一个用户系统，实现一端登陆后其余平台均可以拿到用户信息。

二、安装需要用到的插件，开始实际的代码操作

安装三个插件：npm install --save vue-router vuex js-cookie 安装完之后在项目里的package.json文件中有这三个插件就说明安装成功了

vue-router 应用vue的路由器

vuex 封装store，暴露模块

js-cookie 存浏览器cookie，获取cookie然后登录信息

三、详细介绍

跟紧党的 jue 步，要开始一步一步的操作了

1. 首先是 layout布局：我习惯把layout文件夹放在组件components文件夹内，然后封装layout组件，引用路由组件，完成项目整体架构

在这里我新建了个layout文件夹以及下面的AppHeader和AppFooter文件夹，每个文件夹内新建了个index.vue文件，其实不难理解，就是布局的头部，底部以及整体的布局引用文件。

（1）AppHeader/index.vue && AppFooter/index.vue 这两个组件很简单，就是头部和底部代码，都是静态的。这里有个小细节点：

截至上面，你已经完成了sso单点登录、注册、退出的所有功能了。注意：登录和注册在组件中触发，而退出则直接在路由中触发，也就是你请求地址比如：www.xx.com/logout?redirectURL=http://www.xxxx.com 会自动匹配/logout 路由进行退出。

小结：utils里面的三个文件，我给你们暴露一下，有兴趣的可以研究一下，没兴趣的可以直接使用。包含cookie.js、request.js、validate.js

cookie.js

import Cookies from 'js-cookie'
 
// Cookie的key值
export const Key = {
  accessTokenKey: 'accessToken', // 访问令牌在cookie的key值 
  refreshTokenKey: 'refreshToken', // 刷新令牌在cookie的key值 
  userInfoKey: 'userInfo'
}
 
class CookieClass {
  constructor() {
    this.domain = process.env.VUE_APP_COOKIE_DOMAIN // 域名
    this.expireTime = 15 // 15 天
  }
 
  set(key, value, expires, path = '/') {
    CookieClass.checkKey(key);
    Cookies.set(key, value, {expires: expires || this.expireTime, path: path, domain: this.domain})
  }
 
  get(key) {
    CookieClass.checkKey(key)
    return Cookies.get(key)
  }
 
  remove(key, path = '/') {
    CookieClass.checkKey(key)
    Cookies.remove(key, {path: path, domain: this.domain})
  }
 
  geteAll() {
    Cookies.get();
  }
 
  static checkKey(key) {
    if (!key) {
      throw new Error('没有找到key。');
    }
    if (typeof key === 'object') {
      throw new Error('key不能是一个对象。');
    }
  }
}
 
// 导出
export const PcCookie =  new CookieClass()

request.js 封装了一个axios

import axios from 'axios'
 
const service = axios.create({
  // .env.development 和 .env.productiont
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  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

validate.js

// 校验用户名是否合法 只允许4-30位中文、数字、字母和下划线
export function isvalidUsername(str) {
  const valid_map = /^[a-zA-Z0-9_\u4e00-\u9fa5]{4,30}$/
  return valid_map.test(str)
}
 
// 校验手机号是否合法
export function isvalidMobile(str) {
  const valid_map = 11 && /^1(3|4|5|6|7|8|9)\d{9}$/
  return valid_map.test(str)
}
  
// 校验邮箱是否合法
export function isvalidEmail(str) {
  const valid_map = /^[A-Za-z0-9_.-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
  return valid_map.test(str)
}
 
/* 合法uri*/
export function validateURL(textval) {
  const urlregex = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return urlregex.test(textval)
}

四、注意事项

1.千万不要直接复制我的代码，就算不会也要手写一遍，里面不理解的要多查多问多看。

2.细节很重要，要学会分析问题，找到问题，解决问题

3.promise 成功用什么失败用什么一定要区分清楚

4.在用户行为里面为什么用commit执行定义的方法

5.路由拦截beforeEach里面的三个参数分别是什么？

6.为什么路由component组件用import引入

7.不会的一定要多查多问，不要怕丢人，因为谁一开始都是不会的。