首先,在登录时将token
字段存储到本地sessionStorage
中。
<el-button type="primary" plain @click="login">登录</el-button>
// 验证表单登录是否通过 表单的valid方法
// 在返回数据是promise时,我们可以使用await来简化promise
// 同时要把紧挨着await的方法修饰成异步的async方法
login() {
this.$refs.loginFormRef.validate(async valid => {
if (!valid) return
// 将data解构出来赋值给res
const { data: res } = await this.$http.post('login', this.loginForm)
if (res.meta.status !== 200) return this.$message.error('登录失败')
this.$message.success('登录成功')
// 登录后的token需要保存到客户端, 由于token只应在当前网站打开期间生效,所以保存在sessignStorage中
// 因为项目中出了登录之外的api接口需要登录后才能进行访问
window.sessionStorage.setItem('token', res.data.token)
// 然后通过编程式导航在登录成功后跳转到项目的主页,路由地址是/home
this.$router.push('/home')
})
}
以axios
网络请求为例,在项目的min.js
中,导入axios
,通过axios
的请求拦截器interceptors
添加token
验证字段。
// 导入网络请求axios
import axios from 'axios'
// 配置公共的请求的根路径
axios.defaults.baseURL = 'http://java.com:8888/api/production/'
// 通过axios拦截器interceptors添加token验证
axios.interceptors.request.use(config => {
// 初始登录后Authorization的值是null空,当请求其需要登录后才能请求的接口后才会被赋值
config.headers.Authorization = window.sessionStorage.getItem('token')
// 必须将config return出来
return config
})
// 全局注册axios
Vue.prototype.$http = axios
在router文件夹下的index.js路由配置文件中挂载路由的前置导航守卫router.beforeEach
中作一些登录的限制。
// 挂载路由前置导航守卫
router.beforeEach((to, from, next) => {
// to 将要访问的路径
// from 表示从哪个路径跳转过来
// next 是一个函数,表示放行
if (to.path === '/login') return next() // 如果访问的是登录页则直接放行,否则需要强制登录
// 获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login') // 如果获取的不是token,则强制登录,否则放行
next()
})