Vue实现用户没有登陆时,访问后自动跳转登录页面的实现思路.docx

第

Vue实现用户没有登陆时,访问后自动跳转登录页面的实现思路

//这个方法需要放在newVue之前，不然按F5刷新页面不会调用这个方法

router.beforeEach(function(to,from,next){

console.log(是否需要登录才能访问)

if(to.meta.needLogin){

if(auth.getAdminInfo()){

console.log(auth.getAdminInfo())

console.log(有cookie信息)

next();

}else{

console.log(无cookie信息)

next({

path:/loginCard

}else{

next();

newVue({

el:#app,

router,

store,

components:{App},

template:App/

})

3、编写一个存储数据的工具，使用cookie存储用户登录后的信息

importCookiesfromjs-cookie

constadminInfo=adminInfo

//获取用户信息

exportfunctiongetAdminInfo(){

constadmin=Cookies.get(adminInfo)

if(admin){

returnJSON.parse(admin)

return

//存储用户信息

exportfunctionsetAdminInfo(admin){

returnCookies.set(adminInfo,JSON.stringify(admin))

//移除用户信息

exportfunctionremoveAdminInfo(){

returnCookies.remove(adminInfo)

}

4、写一个登录页面，用户登录后就将数据存储在cookie中

?template

div

el-formref=loginForm:rules=formRules:model=loginUserlabel-width=80px

h3欢迎登录/h3

el-form-itemlabel=用户名prop=username

el-inputprefix-icon=el-icon-usertype=textv-model=loginUser.usernameplaceholder=请输入用户名:maxlength=50clearable/el-input

/el-form-item

el-form-itemlabel=密码prop=password

el-inputprefix-icon=el-icon-locktype=passwordv-model=loginUser.passwordplaceholder=请输入密码:maxlength=50clearable

/el-input

/el-form-item

el-form-item

el-buttontype=primary@click=onSubmit登陆/el-button

el-buttonicon=@click=resetForm重置/el-button

/el-form-item

/el-form

/div

/template

script

import*asauthfrom../utils/auth

exportdefault{

name:LoginCard,

data(){

return{

loginUser:{

username:,

password:,

formRules:{

//制定表单输入的规则

username:[{required:true,message:用户名不能为空,trigger:blur}],

password:[{required:true,message:密码不能为空,trigger:blur}]

methods:{

onSubmit(){

//判断表单是否符合规则

this.$refs[loginForm].validate((valid)={

if(valid){