VUE项目实战13登录与退出功能-保存token和页面权限控制

Posted 2021-09-20 光仔December

接上篇《12、登录与退出功能-请求登录》
上一篇我们讲解了点击登录后发起登录请求的操作，本篇我们来讲解登录成功之后，保存登录会话状态的操作。

一、登录后的事件简述

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

二、获取token并保存

保存token（令牌）就是为了保持登录状态，去访问只有登录后才能访问的API，必须要携带这个后台给我们颁发的token令牌。

那么为什么前面说到要把token保存在sessionStorage而不是localStorage中呢？
对于不了解以上两种前端存储模式的童鞋，我们先来回顾一下sessionStorage和localStorage（感兴趣的可以看我之前的VUE基础博文（【Vue学习总结】9.Vue结合localStorage和生命周期实现todolist】）：
什么是loaclStroage？loaclStroage是html5中加入的新特性，该特性可作为本地存储来使用，即在浏览器上提供了一个5M大小的存储，将第一次请求的数据直接存储到本地，解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)。
使用localStorage需要注意一下事项：
（1）IE8以上的IE版本才支持localStorage这个属性。
（2）localStorage的值类型限定为string类型，如果存储JSON对象类型，需要转换。
（3）localStorage在浏览器的隐私模式下面是不可读取的。
（4）localStorage存储内容多会导致页面卡顿。
（5）localStorage不能被爬虫抓取到。
（6）localStorage遵循同源策略，不同网站不能直接共用相同的localStorage。

localStorage还有个兄弟叫sessionStorage，他们唯一的区别就是localStorage是永久性存储，而sessionStorage在会话结束的时候其存储的键值对会被清空。

因为我们的登录状态需要仅在网站打开期间生效，浏览器关闭或者缓存被清除后，登录状态就要被清除的，所以这里选择使用sessionStorage。

其实之前我们访问登录API接口后，实际上是给我们反馈了一个token的，我们将它打印出来看看：

login(){
  this.$refs.loginFormRef.validate(async (valid)=>{
    if(!valid) return;//false 不执行登录
    //true执行登录
    const {data:res} = await this.$http.post("login",this.loginFrom);
    console.log(res);//打印返回的结果对象
    if(res.meta.status !== 200) return this.$message.error("登录失败！"+res.meta.msg);
    this.$message.success("登录成功！");
  });
}

点击登录后，F12查看控制台：

可以看到反馈的token参数，我们来编写保存的逻辑代码：

login(){
  this.$refs.loginFormRef.validate(async (valid)=>{
    if(!valid) return;//false 不执行登录
    //true执行登录
    const {data:res} = await this.$http.post("login",this.loginFrom);
    console.log(res);
    if(res.meta.status !== 200) return this.$message.error("登录失败！"+res.meta.msg);
    this.$message.success("登录成功！");
    //保存登录后的token状态
    window.sessionStorage.setItem("token",res.data.token);
    this.$router.push("/home");//登录跳转
  });
}

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

我们重新刷新页面点击登录，在F12开发者工具的Application中，查看sessionStorage：

可以看到在回话存储中，看到了我们保存的token。同时页面地址跳转到了home页面。
注：不了解“$router.push”的同学，请查看我之前的博文“【Vue学习总结】19.编程式导航和Hash以及History模式”

二、创建home组件

上面我们成功登录并保存了token，同时跳转到了home页面。由于我们没有创建home页面并设置路由，所以页面是白色的，我们来完成它。首先在components下面创建Home.vue文件，编写如下内容：

<template>
    <div>Home 组件</div>
</template>

<script>
export default {};
</script>

<style lang="less" scoped>

</style>

然后在路由规则文件/router/index.js下，引入Home组件并设置路由映射：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue' //引用Login组件
import Home from '../components/Home.vue' 

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }, //定义访问页面的路由地址
    { path: '/home',component: Home}
  ]
})

export default router

然后刷新页面，重新登录，发现可以正常跳转home页面了：

三、设置Home页面访问权限

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

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

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../components/Login.vue' //引用Login组件
import Home from '../components/Home.vue' 

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  routes: [
    { path: '/', redirect: '/login' },
    { path: '/login', component: Login }, //定义访问页面的路由地址
    { path: '/home',component: Home}
  ]
})
//挂载路由导航守卫
//to是我们跳转的路径，from是来自的路径，next为放行函数
router.beforeEach((to,from,next)=>{
  //如果用户访问登录页，直接放行
  if(to.path ==="/login") return next();
  //从sessionStorage中获取到保存的token值
  const tokenStr = window.sessionStorage.getItem("token");
  //没有token，强制跳转到登录页面
  if(!tokenStr) return next("/login");
  next();//有token，直接放行
})

export default router

重新刷新页面，清除缓存，我们强制访问home页面，发现被跳转到login页面，权限控制成功：

至此，登录后的状态保存和页面跳转及权限管理讲解完毕。
下一篇我们来讲解退出功能，以及提交我们的分支代码。

参考：黑马程序员（www.itheima.com）Vue项目实战教学视频

转载请注明出处：https://blog.csdn.net/acmman/article/details/120100858