<script> export default { data () { return { loginForm: { username: 'admin', password: '123456' }, // 表单验证 loginFormRules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入用户密码', trigger: 'blur' }, { min: 6, max: 18, message: '长度在 6 到 18 个字符', trigger: 'blur' } ] } } }, methods: { // 表单重置按钮 resetLoginForm () { // console.log(this) // resetFields:element-ui提供的表单方法 this.$refs.loginFormRef.resetFields() }, login () { // 表单预验证 // valid:bool类型 this.$refs.loginFormRef.validate(async valid => { // console.log(valid) if (!valid) return false // this.$http.post('login', this.loginForm): 返回值为promise // 返回值为promise,可加await简化操作 相应的也要加async const { data: res } = await this.$http.post('login', this.loginForm) //结构复制 // console.log(res) if (res.meta.status !== 200) return this.$message.error('登录失败') this.$message.success('登录成功') // 1、将登陆成功之后的token, 保存到客户端的sessionStorage中; localStorage中是持久化的保存 // 1.1 项目中出现了登录之外的其他API接口,必须在登陆之后才能访问 // 1.2 token 只应在当前网站打开期间生效,所以将token保存在sessionStorage中 window.sessionStorage.setItem('token', res.data.token) // 2、通过编程式导航跳转到后台主页, 路由地址为:/home this.$router.push('/home') }) } } } </script>
路由导航守卫控制访问权限:
// 挂载路由导航守卫,to表示将要访问的路径,from表示从哪里来,next是下一个要做的操作 next('/login')强制跳转login router.beforeEach((to, from, next) => { // 访问登录页,放行 if (to.path === '/login') return next() // 获取token const tokenStr = window.sessionStorage.getItem('token') // 没有token, 强制跳转到登录页 if (!tokenStr) return next('/login') next() })
在request拦截请求:
// 在request 拦截器中, 展示进度条 NProgress.start() // 请求在到达服务器之前,先会调用use中的这个回调函数来添加请求头信息 axios.interceptors.request.use(config => { NProgress.start() // console.log(config) // 为请求头对象,添加token验证的Authorization字段 config.headers.Authorization = window.sessionStorage.getItem('token') // 在最后必须 return config return config })