登录与退出功能保存token和设置token过期时间过期重新到登录页面

Vue项目登录与退出功能-保存token和页面权限控制，设置token过期时间过期重新到登录页面，本地保存有token就直接不用输入账号密码跳转到首页

做vue后台管理系统的项目的过程中有个登录退出的业务逻辑：

• （1）发起登录请求之前做个对账号密码表单的合法性进行验证规则
• （2）登录的时候发起请求获取token
• （3）将token保存到本地
• （4）路由导航守卫：设置token的过期时间，如果过期了就重新导登录页面，如果用户在token还没有过期的时候打开了登录页面就直接跳转到首页

其实我们在登录成功之后，需要完成以下内容，来保持登录效果以及跳转登录首页：
1、将登录成功后的token，保存到客户端的sessionStorage中
（1） 项目中除了登录login组件接口，其他的组件页面必须在登录后才能访问
（2） token只应在当前网站打开期间生效，所以将token保存在sessionStotage中。
2、通过编程式导航this.$router.push('/home') 跳转到后台主页，路由地址是/home。

上面是对表单输入内容的合法性的验证规则。

下一步是主题内容....

login.vue

code

login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return
        const { data: res } = await this.$http.post('login', this.loginForm) /* 加await返回的是数据 不加返回promise 而返回的数据里面只有data才是api返回的数据 其他的都是axios的 解构并重命名即data重命名为res */
        if (res.meta.status !== 200)  return this.$message.error('登录失败！')
        this.$message.success('登录成功')
        // 登录成功后:
        // 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中 之后的网络请求中要拿这个token放入请求头中
        //   1.1 项目中除了登录之外的其他API接口，必须在登录之后才能访问 token就是登录令牌 
        //   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中（不是localstorage）
           window.sessionStorage.setItem('token',res.data.token)
           this.$router.push('/home')
        // 2. 通过编程式导航跳转到后台主页，路由地址是 /home 但是如果没有拿到token而直接输入地址也不应该跳转 此时要用导航守卫 如果要跳转的是登录页面则直接放行 如果跳转的是其他页面则要判断是否携带token 导航守卫写在router.js里面
        // this.$router.push('/home')
      })

    },

因为登录成功之后，需要跳转到后台首页，所以使用$router的push进行路由跳转 ，路由地址是“/home”

由于我们的Home页面是需要在登录成功之后才可以进行访问的，所以登录之前我们要控制用户无法访问该页面，如何做呢？

•   除了login请求接口，其他都需要授权，才能正常请求数据，所以axios请求拦截器添加token，保证获取数据的权限
    里面有 headers 属性，手动保存在session本地，把这个令牌给token保存下来
    必须是 return config

main.js 代码：

code

 // 添加请求拦截器
// 拦截器的第一部分，第二部分在router index.js里面
axios.interceptors.request.use(function(config) {
  // 在发送请求之前做些什么
  // 判断是否存在token,如果存在将每个页面header添加token
  if (window.localStorage.getItem("token")) {
    config.headers.common['Access-Token'] = window.localStorage.getItem("token");
  }
  return config
})

我们要“路由导航守卫”来控制访问权限。如果用户没有登录，但是直接通过URL访问特定页面，需要重新导航到登录页面。router的beforeEach方法就是“路由导航守卫”，我们可以遍历router的所有路由地址，并可以设置跳转的动作。思路很简单，如果当前访问页面是登录页面，就正常跳转，如果不是，就检测是不是登录状态（token是否为空），如果不是，就跳转到登录页面，如果是就正常跳转。
我们在路由规则文件/router/index.js下，编写“挂载路由导航守卫”的逻辑：

router/index.js

code

 // 挂载路由导航守卫
router.beforeEach((to, from, next) => {
   // to 将要访问的路径
   // from 代表从哪个路径跳转而来
   // next 是一个函数，表示放行
   //     next()  放行    next('/login')  强制跳转

   if (to.path === '/login') return next()
   // 其他页面则要有token才能放行 之后的网络请求中要拿这个token放入请求头中
   const tokenStr = window.sessionStorage.getItem('token')
   if (!tokenStr) return next('/login') /* 没有用else if */
   next()
})

export default router /* 因为要挂载导航守卫 所以不能实时导出 */

---

其实上面的是比较常见的方法。还有一种是最完整的写法（token设置期限，token过期让客户重新登录等功能）：

• // 添加请求拦截器 // 拦截器的第二部分，第一部分在main.js里面
• // 获取存储token的开始时间
• // 后台给出的token有效时间，一个星期 单位 是秒
• // 我们自己定义6天过期，让用户重新登录一下， 用户总不可能在一个页面挂机一天吧
• // 当前时间 // 如果大于说明是token过期了
• // 如果token过期了
• // 如果token没有过期，又是选择了登录页面就直接重定向到首页，不需要重新输入账户密码

code

// 别忘了导入对应的依赖库----
//导入element提示语的组件
// 添加请求拦截器
// 拦截器的第二部分，第一部分在main.js里面
router.beforeEach((to, from, next) => {
 
  // 获取存储localStorage的token
  let token = window.localStorage.getItem('token')
  // 获取存储token的开始时间
  const tokenStartTime = window.localStorage.getItem('tokenStartTime')
  // 后台给出的token有效时间，一个星期 单位 是秒
  // 我们自己定义6天过期，让用户重新登录一下， 用户总不可能在一个页面挂机一天吧
  const timeOver = 6 * 24 * 3600 * 1000
  // 当前时间
  let date = new Date().getTime()
  // 如果大于说明是token过期了
  if(date - tokenStartTime > timeOver) {
     token = null
  }
  // 如果token过期了
  if (!token) {
    if (to.path == '/login') return next()
    // 注意要import element的Message组件
    Message.error("登录状态过期，请重新登录")
    return next('/login')
    // 如果token没有过期，又是选择了登录页面就直接重定向到首页，不需要重新输入账户密码
  } else if (to.path == '/login') {
    return next('/home')
  }
  next()
 
})
export default router